ブラウザ間で JavaScript の垂直スクロールのパーセンテージを正確に判断するにはどうすればよいですか?

JavaScript でのクロスブラウザーの垂直スクロール パーセンテージの決定

Web 開発では、多くの場合、ユーザーの垂直スクロール位置を監視することが不可欠です。ただし、正確でブラウザ間互換性のある方法を見つけるのは難しい場合があります。

クロスブラウザ ソリューション

提供されているコード スニペットは、垂直スクロールのパーセンテージを計算するためのクロスブラウザ アプローチを提供します。

<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 要素と body 要素を、scrollTop とscrollHeight (st と sh) の文字列名とともに変数 h と b に格納することで実装できます。スクロールのパーセンテージは、現在の垂直スクロール位置をビューポートの高さで割ることによって計算され、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 中国語 Web サイトの他の関連記事を参照してください。