jQuery에서 다양한 요소 크기로 부드럽게 동기화된 스크롤을 달성하는 방법은 무엇입니까?

jQuery의 동기화 스크롤: 과제와 해결 방법

동기화 스크롤의 필요성은 유사한 콘텐츠를 표시하는 다양한 크기의 요소로 작업할 때 종종 발생합니다. . 직접 scrollTop 값 설정을 사용하여 기본 스크롤 동기화를 달성할 수 있지만 요소의 크기가 다를 때 제한이 발생합니다.

스크롤 동기화 해결:

에도 불구하고 비례 스크롤을 보장하려면 요소 크기가 다르면 스크롤된 콘텐츠의 비율을 고려해야 합니다. element.scrollTop / (element.scrollHeight - element.offsetHeight) 계산은 이 비율을 산출합니다. 이 값에 다른 요소(element.scrollHeight - element.offsetHeight)를 곱하면 해당 scrollTop 값이 제공됩니다.

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);
    // Firefox workaround. Rebinding without delay isn't enough.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);</code>

이 코드는 $divs 변수를 사용하며 원하는 요소를 대상으로 조정해야 합니다. 또한 청취자 문제를 방지하기 위한 Firefox 관련 해결 방법도 포함되어 있습니다.

위 내용은 jQuery에서 다양한 요소 크기로 부드럽게 동기화된 스크롤을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!