## Firefox で jQuery を使用してスムーズで信頼性の高い同期スクロールを実現するにはどうすればよいですか?

同期スクロールの最適化と Firefox の解像度

jQuery を使用して同期スクロールを実装する場合、次の 2 つの潜在的な問題に対処することが重要です。

1.サイズ格差の同期

さまざまな DIV サイズを考慮して、スクロールされたコンテンツの割合を決定します。

percentage = element.scrollTop / (element.scrollHeight - element.offsetHeight)

比例スクロールを実現するには、他の DIV (scrollHeight - offsetHeight) にこのパーセンテージを掛けます。

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

このアプローチにより、Firefox でのスクロールがスムーズになり、無限ループの問題が防止されます。ライブ デモンストレーションは、

[http://jsfiddle.net/b75KZ/5/](http://jsfiddle.net/b75KZ/5/)

で利用できます。

以上が## Firefox で jQuery を使用してスムーズで信頼性の高い同期スクロールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。