## 如何在 Firefox 中使用 jQuery 实现平滑可靠的同步滚动？

同步滚动优化和 Firefox 分辨率

使用 jQuery 实现同步滚动时，解决两个潜在问题至关重要：

1.大小差异同步

为了考虑不同的 DIV 大小，确定滚动内容的百分比：

percentage = element.scrollTop / (element.scrollHeight - element.offsetHeight)

将其他 DIV 的（scrollHeight - offsetHeight）乘以该百分比即可实现按比例滚动。

2. Firefox 滚动循环

Firefox 可能会触发滚动事件的无限循环。为了防止这种情况，暂时解除监听器的绑定，设置scrollTop，然后重新绑定它：

<code class="javascript">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);</code>

这种方法可以平滑 Firefox 中的滚动并防止无限循环问题。现场演示可在：

[http://jsfiddle.net/b75KZ/5/](http://jsfiddle.net/b75KZ/5/)

以上是## 如何在 Firefox 中使用 jQuery 实现平滑可靠的同步滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！