jQuery中如何实现不同元素大小的平滑同步滚动？

jQuery 中的同步滚动：挑战和解决方案

在处理显示相似内容的不同大小的元素时，经常会出现同步滚动的需求。虽然可以使用直接的scrollTop值设置来实现基本的滚动同步，但当元素具有不同尺寸时，它会面临限制。

解决滚动同步问题：

尽管如此，还是要确保按比例滚动不同的元素大小，需要考虑滚动内容的百分比。计算 element.scrollTop / (element.scrollHeight - element.offsetHeight) 得出此百分比。将此值乘以其他元素的 (element.scrollHeight - element.offsetHeight) 可得出相应的scrollTop 值。

防止 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);
    // Firefox workaround. Rebinding without delay isn't enough.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);</code>

此代码依赖于变量 $divs，应调整该变量以定位所需的元素。它还包含特定于 Firefox 的解决方法，以防止侦听器问题。

以上是jQuery中如何实现不同元素大小的平滑同步滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！