JavaScript에서 브라우저 간 수직 스크롤 비율을 어떻게 결정합니까?

JavaScript에서 세로 스크롤 비율을 결정하는 크로스 브라우저 방법

웹 개발에서는 세로 스크롤 비율을 결정해야 하는 경우가 많습니다. 사용자가 이동한 스크롤바. 다음 방법은 이 문제에 대한 크로스 브라우저 솔루션을 제공합니다.

함수 기반 접근 방식

HTML 요소와 문서 개체를 활용하면 다음과 같이 스크롤 비율을 계산할 수 있습니다. :

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

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

제한 사항

이 방법은 스크롤 시 자동 숨기기 기능으로 인해 최신 모바일 브라우저에서 100% 정확하게 표시되지 않을 수 있습니다.

위 내용은 JavaScript에서 브라우저 간 수직 스크롤 비율을 어떻게 결정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!