如何使用 jQuery 实现两个 Div 之间平滑同步的滚动？

同步滚动变得流畅

使用 jQuery 实现两个 DIV 之间的同步滚动可以通过以下代码实现：

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

但是，这段代码遇到了两个挑战：

1. Div大小不同导致滚动不同步

计算比例滚动位置需要确定滚动内容的百分比。这可以通过以下方式实现：

percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

将另一个 div 的高度和偏移量乘以该百分比可确保按比例滚动。

2. Firefox 中的滚动不太流畅

为了防止 Firefox 中的滚动事件无限循环，请考虑暂时解除监听器绑定：

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);
    setTimeout(function(){ $other.on('scroll', sync ); }, 10);
}
$divs.on( 'scroll', sync);

此解决方案在调整之前断开监听器scrollTop，在短暂延迟后重新绑定它，并确保在 Firefox 中平滑滚动。

要演示此解决方案，请查看交互式 JSFiddle：http://jsfiddle.net/b75KZ/5/

以上是如何使用 jQuery 实现两个 Div 之间平滑同步的滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！