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



1、效果如下

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

2、原因

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

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

3、解决方法代码

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

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