首页 > web前端 > js教程 > 如何在 JavaScript 中确定跨浏览器的垂直滚动百分比?

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

Mary-Kate Olsen
发布: 2024-10-18 17:15:29
原创
387 人浏览过

How Do I Determine the Vertical Scroll Percentage Cross-Browser in JavaScript?

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

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

基于函数的方法

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

1

2

3

4

5

6

7

<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 的人,可以使用事件监听器:

1

2

3

4

5

6

7

8

9

<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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板