我如何在任意时刻查找用户通过垂直滚动条移动了多少比例?
捕获 onscroll
事件以响应用户向下滚动页面很容易,但在事件内部如何确定用户已经滚动了多远呢?在这种情况下,特别重要的是百分比。我并不担心 IE6 的解决方案。
主要框架(Dojo、jQuery、Prototype、Mootools)中是否有任何一种方式可以简单地跨浏览器提供此功能?
我如何在任意时刻查找用户通过垂直滚动条移动了多少比例?
捕获 onscroll
事件以响应用户向下滚动页面很容易,但在事件内部如何确定用户已经滚动了多远呢?在这种情况下,特别重要的是百分比。我并不担心 IE6 的解决方案。
主要框架(Dojo、jQuery、Prototype、Mootools)中是否有任何一种方式可以简单地跨浏览器提供此功能?
2016年10月:已修复。在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);
}
document.body.scrollTop * 100 / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
。 - cprcrack这些方法在我使用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;
}
const scrolledPercentage =
window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
document.addEventListener("scroll", function() {
const height = window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
document.getElementById("height").innerHTML = `Height: ${height}`
})
.container {
position: relative;
height: 200vh;
}
.sticky-div {
position: sticky;
top: 0;
}
<!DOCType>
<html>
<head>
</head>
<body>
<div id="container" class="container">
<div id="height" class="sticky-div">
Height: 0
</div>
</div>
</body>
function getScrollPercent(event: Event): number {
const {target} = event;
const {documentElement, body} = target as Document;
const {scrollTop: documentElementScrollTop, scrollHeight: documentElementScrollHeight, clientHeight} = documentElement;
const {scrollTop: bodyScrollTop, scrollHeight: bodyScrollHeight} = body;
const percent = (documentElementScrollTop || bodyScrollTop) / ((documentElementScrollHeight || bodyScrollHeight) - clientHeight) * 100;
return Math.ceil(percent);
}
<div class="content-wrapper" style="overflow: scroll; height:100px">
<div class="content">Lot of content that scrolls</div>
</div>
var $w = $(this),
scroll_top = $w.scrollTop(),
total_height = $w.find(".content").height(),
viewable_area = $w.height(),
scroll_percent = Math.floor((scroll_top + viewable_area) / total_height * 100);
var vp = dijit.getViewport();
return (vp.t / (document.documentElement.scrollHeight - vp.h));
这将返回0到1之间的值。
首先,将事件监听器附加到您想要跟踪的某个文档
yourDocument.addEventListener("scroll", documentEventListener, false);
然后:
function documentEventListener(){
var currentDocument = this;
var docsWindow = $(currentDocument.defaultView); // This is the window holding the document
var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
var scrollTop = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
var docHeight = $(currentDocument).height(); // This is the full document height.
var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}
我已经审查了上面所有的内容,但它们使用了更复杂的方法来解决问题。我通过一个简单的数学公式找到了答案。
这个公式是:Value/Total * 100。比如说,如果Total是200,你想知道100占200的百分比,那么你可以这样计算:100/200 * 100% = 50%(即为所求的Value)。
pageYOffset表示垂直滚动的距离,不包括边框。当你滚动到底部时,它的值达到最大值。
offsetHeight表示页面的总高度,包括边框! clientHeight表示页面的高度,不包括边框,但也不包括内容的末尾!当你滚动到底部时,例如,你得到了pageyoffset的值为1000,而offsetHeight的值为1200,clientHeight的值为200。那么,1200-200(clientheight)= 1000(pageYOffset)的值在offsetHeight中,因此scrollPosition300(1000的300)/1000 * 100 = 30%。
`pageOffset = window.pageYOffset; pageHeight = document.documentElement.offsetHeight; clientHeight = document.documentElement.clientHeight;
percentage = pageOffset / (pageHeight - clientHeight) * 100 + "%";
console.log(percentage)`
document.documentElement.scrollHeight
和document.documentElement.clientHeight
相等,导致除以零。我正在使用Chromium版本72.0.3626.121(官方版本),构建于Ubuntu。 - Spikatrixhtml { height: 100%; }
,解决了Infinity
issue。 - Spikatrix