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

使用 jQuery 同步滚动：克服同步问题

要实现两个 DIV 元素之间的同步滚动，考虑到它们之间的差异至关重要尺寸。提供的代码直接设置scrollTop值，导致同步不一致。为了解决这个问题，需要计算滚动内容的百分比并相应地调整scrollTop值。

要确定实际高度和当前滚动位置，可以使用以下公式：

percentage = scrollTop / (scrollHeight - offsetHeight)

此计算提供一个介于 0 和 1 之间的值，表示滚动内容的百分比。将其他 DIV 的 (scrollHeight - offsetHeight) 乘以该值会得到比例滚动的对应的 scrollTop 值。

此外，为了防止 Firefox 中滚动事件的无限循环，您应该暂时取消绑定侦听器，设置

$divs.on('scroll', 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);
});

通过实施这些改进，您可以在 DIV 元素之间实现平滑同步的滚动，即使大小不同，并避免 Firefox 中潜在的无限循环问题。

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