如何確定不同瀏覽器中 JavaScript 的垂直滾動百分比？

在JavaScript 中決定垂直捲動百分比：跨瀏覽器方法

決定使用者垂直捲動百分比的能力對於實現捲動WebWeb應用程式中的依賴功能。本綜合指南提供了跨瀏覽器解決方案，可準確計算滾動百分比。

非框架解決方案

對於Chrome、Firefox 和IE9 等瀏覽器，以下公式可用於計算滾動百分比：

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

其中：

• h 是文檔的根元素
• b 是文檔的正文元素
• 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>

函數實作

您可以將這個公式封裝成一個函數以便重複使用：

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

jQuery 解決方案

• 如果您使用jQuery，以下程式碼片段提供了計算滾動百分比的跨瀏覽器解決方案：

注意 對於現代行動瀏覽器，由於瀏覽器UI 自動隱藏滾動行為，解決方案可能無法達到100%。 jQuery 解決方案是基於提供的原始答案。

以上是如何確定不同瀏覽器中 JavaScript 的垂直滾動百分比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！