水平和竖直滑动条捆绑，表头固定的实现

Posted 2020-10-04

　　首先，在很多的网页数据分析或者网站查询数据库的操作中，我们不可避免需要在前端页面中展示所有数据。由于版面构建的问题，导致div内容模块大小，不足以容纳所有数据，这时候我们就必须考虑引入页面的水平或者竖直滚动条。这样能够实现在固定大小的div中，通过滑动滚动条来对所有数据进行检索。这时，我们会发现，如果表头不被固定，我们滑动滚动条时，不能很好的确定当前数据属于什么列是什么样的数据。

　　所以，在这里我分享一下通过js固定表头的页面操作：

1  //水平、垂直滚动条实现表头标题的固定
2       document.getElementById("table1").onscroll=function(e) {
3     document.getElementById("table2").scrollLeft = document.getElementById("table1_tbodyDiv").scrollLeft;
4 };

 　　关键代码如上诉。这里我说的是，动态获取后台json数据，动态生成表格的模型。首先我们需要建立两个table模型，table1为表头，table2为内容。最后把两张表设置成有滚动条，并且把table1的滚动条事件隐藏，并绑定到table2的滚动事件上。这样就能达到我们的效果。