JavaScript でさまざまなブラウザーのスクロール パーセンテージを計算するにはどうすればよいですか?

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

完了した垂直スクロールのパーセンテージを決定する際のブラウザー間の互換性を確保するには、汎用性の高い方法が必要です。 Dojo、jQuery、Prototype、Mootools などのフレームワークが解決策を提供する可能性がありますが、ここではネイティブ JavaScript のアプローチについて詳しく説明します。

ネイティブ JavaScript の実装

「scrollTop」プロパティと「scrollHeight」プロパティを使用する。スクロールの割合は次のように計算できます。

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

このメソッドは、Chrome、Firefox、IE9 を含むすべての主要なブラウザでのスクロールの割合を効果的に決定します。

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;
});</code>

注: モバイル ブラウザーでは潜在的な矛盾があります

次のことが重要です。 UI のスクロール時の自動非表示の動作により、提供されている方法は最新のモバイル ブラウザーでは 100% の精度に達しない可能性があることに注意してください。ただし、ほとんどのシナリオでは、さまざまなブラウザーにわたるスクロール率の信頼できる近似値が得られます。

以上がJavaScript でさまざまなブラウザーのスクロール パーセンテージを計算するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。