jQuery を使用して 2 つの DIV 間でスムーズな同期スクロールを実現するにはどうすればよいですか?

jQuery による同期スクロール: 同期の問題の克服

2 つの DIV 要素間で同期スクロールを実現するには、それらの要素の違いを考慮することが重要です。サイズ。提供されたコードは、scrollTop 値を直接設定するため、同期の不一致が発生します。これを解決するには、スクロールされたコンテンツの割合を計算し、それに応じてスクロールトップの値を調整する必要があります。

実際の高さと現在のスクロール位置を決定するには、次の式を使用できます:

percentage = scrollTop / (scrollHeight - offsetHeight)

この計算では、スクロールされたコンテンツの割合を表す 0 から 1 までの値が得られます。他の DIV (scrollHeight - offsetHeight) にこの値を乗算すると、比例スクロールに対応するscrollTop 値が得られます。

さらに、Firefox でのスクロール イベントの無限ループを防ぐために、リスナーのバインドを一時的に解除し、 scrollTop 値を変更し、リスナーを再バインドします:

$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 を使用して 2 つの DIV 間でスムーズな同期スクロールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。