使⽤原⽣js和position：sticky固定表头和部分列
在看css⽂档的时候发现了这个定位⽅法，正好项⽬上需要使⽤原⽣代码来实现固定表头和表列的功能，就琢磨使⽤sticky来实现。下⾯是⼀个简单的demo。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
js控制滚动条
#table-head {
overflow: hidden scroll;
background-color: #eee;
}
#table-body {
overflow: auto scroll;
max-height:500px;
}
/* 使⽤position: sticky；将表格第⼀列固定 */
table tr>td:first-child {
position: sticky;
left:0;
}
</style>
</head>
<body>
<div class="table-container">
<div id="table-head">
<table>
</table>
</div>
<div id="table-body">
<table>
</table>
</div>
</div>
<script>
// ⽣成表格
const thead = document.querySelector('#table-head>table')
const tbody = document.querySelector('#table-body>table')
const colNum =40// 列数
const rowNum =50// ⾏数
thead.width = colNum *150+'px'
tbody.width = colNum *150+'px'
let theadInnerHtml ='<colgroup>'
let tbodyInnerHtml ='<colgroup>'
for(let i =0; i < colNum; i++){
theadInnerHtml +='<col >'
tbodyInnerHtml +='<col >'
}
theadInnerHtml +='</colgroup>'
tbodyInnerHtml +='</colgroup>'
theadInnerHtml +='<tr>'
for(let i =0; i < colNum; i++){
theadInnerHtml +=`<td>第${i}列</td>`
}
theadInnerHtml +='</tr>'
thead.innerHTML = theadInnerHtml
for(let i =0; i < rowNum; i++){
tbodyInnerHtml +='<tr>'
for(let j =0; j < colNum; j++){
tbodyInnerHtml +=`<td>${i}</td>`
}
tbodyInnerHtml +='</tr>'
}
tbody.innerHTML = tbodyInnerHtml
// 表体滚动事件监听
theadContainer = ElementById('table-head')
tbodyContainer = ElementById('table-body')
// 拖动表体滚动条时将相应位置传给表头，实现同步滚动的效果
theadContainer.scrollLeft = tbodyContainer.scrollLeft
}
</script>
</body>
</html>
思路：将表头和表体分开写，让表体上下滚动不影响表头；在表格左右滚动的时候触发position: sticky的特性实现固定列的效果，同时将表体的scrollLeft赋值给表头的scrollLeft，实现列对齐的效果。
注意事项
position: sticky兼容chrome56+，对ie兼容性不好，并且不脱离⽂档流，要谨慎使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。