两个table的水平滚动条级联滚动(同步滚动)

wangzhazha0000

已于 2022-09-22 11:50:46 修改

阅读量1.2k

点赞数

分类专栏： #.net 文章标签： servlet javascript html

于 2022-09-22 11:43:18 首次发布

本文链接：https://blog.csdn.net/wangzhazha0000/article/details/126988852

版权

在构建动态报表时，由于表头和内容分别放在两个独立的表格中，为实现水平滚动条的级联滚动，即同步滚动，需要进行特定的设置。通过将表头表格（table1）所在的div设置为可见（overflow: visible），而内容表格（table2）所在的div设置为自动（overflow: auto），可以确保两个表格在水平滚动时保持同步。

摘要由CSDN通过智能技术生成

做动态报表绘制HTML时，报表表头和内容是分开绘制的，即标题放一个table，内容放一个table。如需加水平的滚动条，那么必须保证两个table同步

table1放标题，table2放内容

<div id="headDiv" style="overflow:visible;">

    <table ></table>//header

</div>

<div id="bodyDiv" style="overflow:auto;">

    <table ></table>//body

</div>


<script type="text/javascript">

$(document).ready(function () {
    $("#bodyDiv").scroll(function () {//滚动条放两个table的下方，即以bodyDiv为准
        var scrollLeft = $("#bodyDiv").scrollLeft();
        var margin_left =  - Number(scrollLeft);
        $("#headDiv").css({ "margin-left": margin_left });
     });
});

</script>