如何在 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中文網其他相關文章！