如何在 jQuery 中實現平滑且按比例的同步滾動：Firefox 延遲問題的解決方案？

jQuery 中的同步滾動困境：實現平滑且成比例的滾動

處理不同大小的元素時，實現同步滾動可能是一個挑戰。為了解決這個問題，您需要確定滾動內容的百分比並計算其他元素相應的scrollTop值。

在您的情況下，您可以使用以下公式：scrollTop / (scrollHeight - offsetHeight)。這會產生一個介於 0 和 1 之間的值，表示已滾動的元素的百分比。

此外，您可能會遇到 Firefox 中的滾動變得緩慢的問題。這是因為您目前的程式碼無意中創建了滾動事件的不間斷循環。使用 off() 暫時解綁監聽器，調整scrollTop，然後重新綁定就可以解決這個問題。

以下是解決這兩個問題的最佳化程式碼片段：

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 is insufficient.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}

$divs.on( 'scroll', sync);

這段程式碼確保按比例滾動，同時防止Firefox 中滾動事件的無限循環。要查看工作演示，請訪問此jsfiddle：http://jsfiddle.net/b75KZ/5/

以上是如何在 jQuery 中實現平滑且按比例的同步滾動：Firefox 延遲問題的解決方案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！