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

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

사용자의 세로 스크롤 비율을 결정하는 기능은 스크롤 구현에 매우 중요합니다. 웹 애플리케이션의 종속 기능. 이 포괄적인 가이드는 스크롤된 비율을 정확하게 계산하기 위한 크로스 브라우저 솔루션을 제공합니다.

비 프레임워크 솔루션

Chrome, Firefox 및 IE9와 같은 브라우저의 경우 다음 공식을 사용하여 스크롤 비율을 계산할 수 있습니다.

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

여기서:

• h는 문서의 루트 요소입니다
• b는 문서의 본문 요소입니다
• st는 'scrollTop'(WebKit 브라우저의 경우) 또는 'scrollTop'(다른 브라우저의 경우)입니다
• sh는 'scrollHeight'(WebKit 브라우저의 경우) 또는 'scrollHeight'(다른 브라우저의 경우)입니다. )

함수 구현

재사용을 위해 이 공식을 함수로 캡슐화할 수 있습니다.

<code class="javascript">function getScrollPercent() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}</code>

jQuery Solution

jQuery를 사용하는 경우 다음 코드 조각은 스크롤 비율 계산을 위한 브라우저 간 솔루션을 제공합니다.

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

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

참고

• 최신 모바일 브라우저의 경우 브라우저 UI 스크롤 시 자동 숨기기 동작으로 인해 솔루션이 100%에 도달하지 못할 수 있습니다.
• jQuery 솔루션은 제공된 원래 답변을 기반으로 합니다.

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