如何在 jQuery 中实现平滑且按比例的同步滚动：Firefox 延迟问题的解决方案？

jQuery 中的同步滚动困境：实现平滑且成比例的滚动

处理不同大小的元素时，实现同步滚动可能是一个挑战。为了解决这个问题，您需要确定滚动内容的百分比并计算其他元素相应的scrollTop值。

在您的情况下，您可以使用以下公式：scrollTop / (scrollHeight - offsetHeight)。这会产生一个介于 0 和 1 之间的值，表示已滚动的元素的百分比。

此外，您可能会遇到 Firefox 中的滚动变得缓慢的问题。这是因为您当前的代码无意中创建了滚动事件的不间断循环。使用 off() 暂时解绑监听器，调整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 is insufficient.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}

$divs.on( 'scroll', sync);

这段代码确保按比例滚动，同时防止 Firefox 中滚动事件的无限循环。要查看工作演示，请访问此jsfiddle：http://jsfiddle.net/b75KZ/5/

以上是如何在 jQuery 中实现平滑且按比例的同步滚动：Firefox 延迟问题的解决方案？的详细内容。更多信息请关注PHP中文网其他相关文章！