如何跨浏览器准确确定 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中文网其他相关文章！