jQuery에서 부드럽고 비례적인 동기화 스크롤을 달성하는 방법: Firefox 지연 문제에 대한 해결책?

jQuery의 동기화된 스크롤링 딜레마: 부드럽고 비례적인 스크롤링 달성

동기화된 스크롤링을 구현하는 것은 다양한 크기의 요소를 처리할 때 어려울 수 있습니다. 이 문제를 해결하려면 스크롤된 콘텐츠의 비율을 확인하고 다른 요소에 해당하는 scrollTop 값을 계산해야 합니다.

귀하의 경우에는 scrollTop / (scrollHeight - offsetHeight) 공식을 사용할 수 있습니다. 이는 스크롤된 요소의 백분율을 나타내는 0에서 1 사이의 값을 산출합니다.

또한 Firefox에서 스크롤이 느려지는 문제가 발생할 수 있습니다. 이는 현재 코드가 실수로 스크롤 이벤트의 끊임없는 루프를 생성한다는 사실에서 비롯됩니다. off()를 사용하여 리스너를 일시적으로 바인딩 해제하고, scrollTop을 조정한 다음 다시 바인딩하면 이 문제를 해결할 수 있습니다.

다음은 두 문제를 모두 해결하는 최적화된 코드 조각입니다.

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

$divs.on( 'scroll', sync);

이 코드 Firefox에서 스크롤 이벤트의 무한 루프를 방지하면서 비례 스크롤을 보장합니다. 작동 데모를 보려면 jsfiddle을 방문하세요. http://jsfiddle.net/b75KZ/5/

위 내용은 jQuery에서 부드럽고 비례적인 동기화 스크롤을 달성하는 방법: Firefox 지연 문제에 대한 해결책?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!