다양한 브라우저의 JavaScript에서 스크롤 비율을 계산하는 방법은 무엇입니까?

JavaScript의 스크롤 비율 결정: 브라우저 간 접근 방식

세로 스크롤 완료 비율을 결정할 때 브라우저 간 호환성을 위해서는 다양한 방법이 필요합니다. Dojo, jQuery, Prototype 및 Mootools와 같은 프레임워크가 솔루션을 제공할 수 있지만 우리는 기본 JavaScript 접근 방식을 자세히 살펴보겠습니다.

기본 JavaScript 구현

'scrollTop' 및 'scrollHeight' 속성을 사용하여, 다음과 같이 스크롤 비율을 계산할 수 있습니다.

<code class="javascript">var h = document.documentElement, 
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';

var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;</code>

이 방법은 Chrome, Firefox 및 IE9를 포함한 모든 주요 브라우저에서 스크롤 비율을 효과적으로 결정합니다.

jQuery 구현(원본 답변)

기본 솔루션은 효율적이지만 원래 답변에서 jQuery 구현도 제공합니다.

<code class="javascript">$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
});</code>

참고: 모바일 브라우저에서 잠재적인 불일치

다음이 중요합니다. 제공된 방법은 스크롤 시 UI 자동 숨기기 동작으로 인해 최신 모바일 브라우저에서 100% 정확도에 도달하지 못할 수 있습니다. 그러나 대부분의 시나리오에서는 다양한 브라우저에서 스크롤 비율에 대한 신뢰할 수 있는 근사치를 제공해야 합니다.

위 내용은 다양한 브라우저의 JavaScript에서 스크롤 비율을 계산하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!