如何在 JavaScript 中确定跨浏览器的垂直滚动百分比？

JavaScript 中确定垂直滚动百分比的跨浏览器方法

在 Web 开发中，经常需要确定垂直滚动的百分比用户已经移动过的滚动条。以下方法提供了解决此问题的跨浏览器解决方案。

基于函数的方法

利用 HTML 元素和文档对象，我们可以计算滚动百分比，如下所示:

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

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.log(scrollPercent);
})</code>

限制

请注意，由于自动隐藏滚动功能，此方法可能无法在现代移动浏览器上准确显示 100%。

以上是如何在 JavaScript 中确定跨浏览器的垂直滚动百分比？的详细内容。更多信息请关注PHP中文网其他相关文章！