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