如何找出用户在任何给定点移动过的垂直滚动条的百分比？
onscroll当用户向下滚动页面时触发事件很容易，但是我如何在该事件中找出他们滚动了多远？在这种情况下，百分比尤其重要。我并不特别担心 IE6 的解决方案。
是否有任何主要框架（Dojo、jQuery、Prototype、Mootools）以简单的跨浏览器兼容方式公开了这一点？
Javascript中确定垂直滚动百分比的跨浏览器方法
IT技术
javascript
cross-browser
scroll
2021-02-03 03:50:49
6个回答
2016 年 10 月：已修复。答案中缺少 jsbin 演示中的括号。oop。
铬、火狐、IE9+。jsbin 上的现场演示
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
作为功能：
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;
}
如果您愿意jQuery（原始答案）：
$(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);
})html{ height:100%; }
body{ height:300%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>我想我找到了一个不依赖于任何库的好解决方案：
/**
* Get current browser viewpane heigtht
*/
function _get_window_height() {
return window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight || 0;
}
/**
* Get current absolute window scroll position
*/
function _get_window_Yscroll() {
return window.pageYOffset ||
document.body.scrollTop ||
document.documentElement.scrollTop || 0;
}
/**
* Get current absolute document height
*/
function _get_doc_height() {
return Math.max(
document.body.scrollHeight || 0,
document.documentElement.scrollHeight || 0,
document.body.offsetHeight || 0,
document.documentElement.offsetHeight || 0,
document.body.clientHeight || 0,
document.documentElement.clientHeight || 0
);
}
/**
* Get current vertical scroll percentage
*/
function _get_scroll_percentage() {
return (
(_get_window_Yscroll() + _get_window_height()) / _get_doc_height()
) * 100;
}
这应该可以解决问题，不需要库：
function currentScrollPercentage()
{
return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}
这些在 Chrome 19.0、FF12、IE9 中对我来说非常有效：
function getElementScrollScale(domElement){
return domElement.scrollTop / (domElement.scrollHeight - domElement.clientHeight);
}
function setElementScrollScale(domElement,scale){
domElement.scrollTop = (domElement.scrollHeight - domElement.clientHeight) * scale;
}
如果您使用的是 Dojo，则可以执行以下操作：
var vp = dijit.getViewport();
return (vp.t / (document.documentElement.scrollHeight - vp.h));
这将返回一个介于 0 和 1 之间的值。