jQuery를 사용하여 두 Div 간에 부드럽고 동기화된 스크롤을 구현하는 방법은 무엇입니까?

부드러운 동기화 스크롤

다음 코드를 사용하면 jQuery를 사용하여 두 DIV 간의 동기화 스크롤을 구현할 수 있습니다.

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

그러나 이 코드는 두 가지 문제에 직면합니다:

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

이 솔루션은 조정하기 전에 리스너의 연결을 해제합니다. 잠시 지연된 후 scrollTop을 다시 바인딩하고 Firefox에서 원활한 스크롤을 보장합니다.

이 솔루션을 시연하려면 대화형 JSFiddle을 확인하세요: http://jsfiddle.net/b75KZ/5/

위 내용은 jQuery를 사용하여 두 Div 간에 부드럽고 동기화된 스크롤을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!