브라우저 전체에서 JavaScript의 세로 스크롤 비율을 정확하게 결정하는 방법은 무엇입니까?

JavaScript에서 크로스 브라우저의 세로 스크롤 비율 결정

웹 개발에서는 사용자의 세로 스크롤 위치를 모니터링하는 것이 필수적인 경우가 많습니다. 그러나 정확하고 크로스 브라우저 호환 방법을 찾는 것은 어려울 수 있습니다.

크로스 브라우저 솔루션

제공된 코드 조각은 세로 스크롤 비율을 계산하기 위한 크로스 브라우저 접근 방식을 제공합니다.

<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>

이 코드는 HTML 및 본문 요소를 변수 h 및 b에 저장하고, scrollTop 및 scrollHeight의 문자열 이름(st 및 sh)을 저장하여 구현할 수 있습니다. 그런 다음 현재 수직 스크롤 위치를 100%로 조정된 뷰포트 높이로 나누어 스크롤 비율을 계산합니다.

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;
  
  console.clear();
  console.log(scrollPercent);
});</code>

주의사항

브라우저 UI의 자동 숨기기 동작으로 인해 최신 모바일 브라우저에서는 이 솔루션이 100%에 도달하지 못할 수도 있다는 점에 유의할 가치가 있습니다.

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