## Firefox에서 jQuery를 사용하여 부드럽고 안정적인 동기화 스크롤을 달성하는 방법은 무엇입니까?

동기화 스크롤 최적화 및 Firefox 해상도

jQuery를 사용하여 동기화 스크롤을 구현할 때 두 가지 잠재적인 문제를 해결하는 것이 중요합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!