JavaScript でクロスブラウザーの垂直スクロールの割合を決定するにはどうすればよいですか?

JavaScript で垂直スクロールのパーセンテージを決定するためのクロスブラウザーメソッド

Web 開発では、垂直スクロールのパーセンテージを決定することが必要になることがよくあります。ユーザーが移動したスクロールバー。次の方法は、この問題に対するクロスブラウザーの解決策を提供します。

関数ベースのアプローチ

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 中国語 Web サイトの他の関連記事を参照してください。