如何跨瀏覽器準確地確定 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中文網其他相關文章！