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 中国語 Web サイトの他の関連記事を参照してください。