小5聊页面滚动条联动出现值偏差原因

Posted 2022-02-24 小5聊

在编写表格插件时，可能会遇到这样的一个情况，当你移动数据行横向滚动条，同时也关联移动字段行时，字段行横向滚动条移动已经结束，但是数据行横向滚动条还能移动，导致数据行和字段行布局不一致

 

1、效果如下

2、原因

因为数据行滚动条除了有横向滚动条，还有纵向滚动条，导致他们之间的滚动不一致

字段行横向滚动条长度为835px，数据行的滚动条长度为810px

3、解决方法代码

 只需要保持两者滚动条值一致即可

$('.title-row').scroll(function () 
    var left = $(this).scrollLeft();
    $(".title-row").scrollLeft(left);
    $('.data-row').scrollLeft($(".lmy-title-row").scrollLeft());
);