Question

我一直在使用Javascript和jQuery（1.11.3）在Web应用程序上同步两个滚动条。到目前为止，我一直在做的是在一个div上发生滚动事件的任何时候，我使用scrollTop来调整另一个div上的位置：

$left = $("#left")
$right = $("#right")

$left.scroll(function () {
    $right.scrollTop($left.scrollTop());
});

$right.scroll(function () {
    $left.scrollTop($right.scrollTop());
});

（小提琴：http://jsfiddle.net/jcano/8xaw2896/2/）

问题来自scrollTop在它调用的元素上触发滚动事件，创建循环并使其在某些浏览器上行为异常。

Javascript事件排队，因此在调用scrollTop之前和之后切换标志不起作用（并且可能适得其反）。所以我提出了这个解决方案：

$left = $( "#left" )
scrollLeft = []

$right = $( "#right" )
scrollRight = []

$left.scroll( function () {
    if ( !scrollRight.pop() ) {
        scrollLeft.push( true );
        $right.scrollTop( $left.scrollTop() );
    }
} );

$right.scroll( function () {
    if ( !scrollLeft.pop() ) {
        scrollRight.push( true );
        $left.scrollTop( $right.scrollTop() );
    }
} );

（小提琴：http://jsfiddle.net/jcano/8xaw2896/4/）

这实际上有效，即使在另一个div上触发了滚动事件，代码也不会执行并且循环被破坏。我正在使用带有push和pop的队列，以防某些浏览器以某种奇怪的方式调用事件处理程序;可能使用单个布尔变量就足以保护scrollTop。

我的问题是，有更好的方法吗？

同步滚动条，scrollTop和滚动事件循环

0 个答案: