jQuery를 사용하여 두 DIV 간에 원활하게 동기화된 스크롤을 달성하는 방법은 무엇입니까?

jQuery를 사용한 동기화된 스크롤: 동기화 문제 극복

두 DIV 요소 간의 동기화된 스크롤을 달성하려면 두 요소의 차이점을 설명하는 것이 중요합니다. 크기. 제공된 코드는 scrollTop 값을 직접 설정하므로 동기화가 일관되지 않습니다. 이 문제를 해결하려면 스크롤된 콘텐츠의 비율을 계산하고 이에 따라 scrollTop 값을 조정해야 합니다.

실제 높이와 현재 스크롤 위치를 확인하려면 다음 공식을 사용할 수 있습니다.

percentage = scrollTop / (scrollHeight - offsetHeight)

이 계산은 스크롤된 콘텐츠의 비율을 나타내는 0에서 1 사이의 값을 제공합니다. 다른 DIV(scrollHeight - offsetHeight)에 이 값을 곱하면 비례 스크롤에 해당하는 scrollTop 값이 생성됩니다.

또한 Firefox에서 스크롤 이벤트의 무한 루프를 방지하려면 리스너를 일시적으로 바인딩 해제하고 scrollTop 값을 입력한 다음 리스너를 다시 바인딩합니다.

$divs.on('scroll', 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);
});

이러한 개선 사항을 구현하면 다양한 크기에서도 DIV 요소 간에 원활하고 동기화된 스크롤을 달성하고 Firefox에서 잠재적인 무한 루프 문제를 방지할 수 있습니다.

위 내용은 jQuery를 사용하여 두 DIV 간에 원활하게 동기화된 스크롤을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!