解决Jquery使两个滚动条同步滚动后滚动时候速度很慢的问题

最新推荐文章于 2023-07-21 17:20:07 发布

SZN_NJ

最新推荐文章于 2023-07-21 17:20:07 发布

阅读量907

点赞数 4

文章标签： jquery javascript js

本文链接：https://blog.csdn.net/Kasugano_Love/article/details/112974643

版权

解决Jquery使两个滚动条同步滚动后滚动时候速度很慢的问题

Jquery通用的滚动条同步代码是这样的

$("#tbodyX").scroll(function(){
        $("#tbodyY").scrollTop($(this).scrollTop()); // 纵向滚动条
        $("#tbodyY").scrollLeft($(this).scrollLeft()); // 横向滚动
});

$("#tbodyY").scroll(function(){
        $("#tbodyX").scrollTop($(this).scrollTop());
        $("#tbodyX").scrollLeft($(this).scrollLeft());
});

但是这样会造成一个问题：滚动时候速度很慢！

问题原因：由于第一个元素滚动时触发了第二个元素的滚动，导致第一个刚滚动，第二个立马就调回去了！

解决方法：使用mouseover事件保证始终只有一个scroll事件中的function在工作。

上代码：

/*同步滚动条*/
var flagscroll=1;

$("#tbodyX").mouseover(function () {
    flagscroll=1;
});

$("#tbodyY").mouseover(function () {
    flagscroll=0;
});

$("#tbodyX").scroll(function(){
    if(flagscroll==1)
    {
        $("#tbodyY").scrollTop($(this).scrollTop()); // 纵向滚动条
        $("#tbodyY").scrollLeft($(this).scrollLeft()); // 横向滚动
    }
});

$("#tbodyY").scroll(function(){
    if(flagscroll==0)
    {
        $("#tbodyX").scrollTop($(this).scrollTop());
        $("#tbodyX").scrollLeft($(this).scrollLeft());
    }
});