使用jQuery同步滚动？

一尘不染

使用jQuery同步滚动？

css

我正在尝试DIV使用以下代码实现两个的同步滚动。

$(document).ready(function() {
    $("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

#div1并且#div2说内容相同但大小不同

#div1 {
 height : 800px;
 width: 600px;
}
#div1 {
 height : 400px;
 width: 200px;
}

有了这段代码，我面临两个问题。

1）滚动没有很好地同步，因为div的大小不同。我知道，这是因为我直接设置该scrollTop值。我需要找到滚动内容的百分比并scrollTop为另一个计算相应的值div。我不确定如何找到实际高度和当前滚动位置。

2）仅在中发现此问题firefox。在firefox中，滚动不像其他浏览器那样平滑。我认为这是因为上面的代码创建了滚动事件的无限循环。我不确定，为什么只有Firefox才发生这种情况。有没有办法找到滚动事件的来源，以便我可以解决此问题。

任何帮助将不胜感激。

阅读 367

2020-05-16

共1个答案

一尘不染

您可以element.scrollTop / (element.scrollHeight - element.offsetHeight)用来获取百分比（它将是0和之间的一个值1）。因此，您可以将其他元素(.scrollHeight - .offsetHeight)与此值乘以进行比例滚动。

为了避免在循环中触发侦听器，您可以暂时取消绑定该侦听器，设置scrollTop并重新绑定。

var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    // Firefox workaround. Rebinding without delay isn't enough.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);

2020-05-16