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

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

ユーザーの垂直スクロール パーセンテージを決定する機能は、スクロールを実装するために重要です-Web アプリケーションの依存機能。この包括的なガイドでは、スクロールの割合を正確に計算するためのクロスブラウザー ソリューションを提供します。

非フレームワーク ソリューション

Chrome、Firefox、IE9 などのブラウザーの場合、次の式を使用してスクロール率を計算できます:

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

ここで:

• h はドキュメントのルート要素
• b はドキュメントの body 要素
• 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 ソリューション

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