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

同期スクロールがスムーズになりました

jQuery を使用して 2 つの DIV 間の同期スクロールを実装するには、次のコードを使用します。

$(document).ready(function() {
    $("#div1").scroll(function () {
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () {
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

ただし、このコードには次の 2 つの課題があります。

1. Div サイズの違いによる非同期スクロール

比例スクロール位置を計算するには、スクロールされたコンテンツの割合を決定する必要があります。これは、次の方法で実現できます。

percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

他の div の高さとオフセットにこのパーセンテージを乗算すると、比例スクロールが保証されます。

2. Firefox でのスムーズでないスクロール

Firefox でのスクロール イベントの無限ループを防ぐには、一時的にリスナーのバインドを解除することを検討してください。

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);

この解決策は、調整する前にリスナーを解放します。

このソリューションをデモンストレーションするには、インタラクティブな JSFiddle を確認してください: http://jsfiddle.net/b75KZ/5/

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