如何用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中文網其他相關文章！