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