jQuery でさまざまな要素サイズでスムーズな同期スクロールを実現するにはどうすればよいですか?

jQuery の同期スクロール: 課題と解決策

同期スクロールの必要性は、類似したコンテンツを表示するさまざまなサイズの要素を操作するときによく発生します。 。基本的なスクロール同期は、scrollTop 値を直接設定することで実現できますが、要素のサイズが異なる場合は制限に直面します。

スクロール同期のアドレス指定:

にもかかわらず、比例スクロールを確保するには要素のサイズが異なる場合は、スクロールされるコンテンツの割合を考慮する必要があります。 element.scrollTop / (element.scrollHeight - element.offsetHeight) という計算により、このパーセンテージが得られます。この値を他の要素 (element.scrollHeight - element.offsetHeight) で乗算すると、対応するスクロールトップ値が得られます。

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