javascript 找到页面的最大滚动位置
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17688595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
finding the maximum scroll position of a page
提问by Neil Philip Whitehead
I have made the body of the page 200% tall so that it fits on a screen twice. Using javascript I am making it keep scrolling to the top or bottom when you scroll. For this, I need to find out the lowest scroll point of the page on any browser or screen size so that it stops when it gets there.
我已将页面主体设置为 200% 高,以便在屏幕上显示两次。使用 javascript 我让它在滚动时继续滚动到顶部或底部。为此,我需要在任何浏览器或屏幕尺寸上找出页面的最低滚动点,以便它在到达那里时停止。
No JQuery please.
Thank you.
请不要使用 JQuery。
谢谢你。
My code: (it is still being put together so needs a bit of work)
我的代码:(仍在整理中,因此需要做一些工作)
function getScrollXY() {
var x = 0, y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
// Netscape
x = window.pageXOffset;
y = window.pageYOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
// DOM
x = document.body.scrollLeft;
y = document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
// IE6 standards compliant mode
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return [x, y];
}
function scrollup() {
if (xy[1] > 0) {
window.scrollBy(0,-100);
setTimeout(scrollup,200);
} else {
null;
}
}
function scrolldown() {
if (xy[1] < ) {
window.scrollBy(0,100);
setTimeout(scrolldown,200);
} else {
null;
}
}
function dothescroll() {
var xy = getScrollXY();
var y = xy[1];
setTimeout(function(){
if (xy[1] > y) {
scrollup();
} else {
scrolldown();
}
},200);
}
回答by Neil Philip Whitehead
This is the cross browser compatible version:
这是跨浏览器兼容版本:
var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight,
document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
回答by alutom
var limit = document.body.offsetHeight - window.innerHeight;
// document.body.offsetHeight = computed height of the <body>
// window.innerHeight = available vertical space in the window
Compare xy[1] < limit
比较 xy[1] < limit
Note:You might need to increase the value by margin and/or padding of the body. You can also try using clientHeight
instead of offsetHeight
.
注意:您可能需要通过正文的边距和/或填充来增加值。您也可以尝试使用clientHeight
代替offsetHeight
.
回答by yckart
While this is not part of any specification, you could try window.scrollMaxY
.
虽然这不是任何规范的一部分,但您可以尝试window.scrollMaxY
.
Returns the maximum number of pixels that the document can be scrolled vertically. https://developer.mozilla.org/docs/Web/API/Window/scrollMaxY
返回文档可以垂直滚动的最大像素数。 https://developer.mozilla.org/docs/Web/API/Window/scrollMaxY
Fallback if unavailable:
如果不可用则回退:
var scrollMaxY = window.scrollMaxY || (document.documentElement.scrollHeight - document.documentElement.clientHeight)
Note, documentElement
isn't always the scrolling element (some browsers use body
instead). The solution is the new scrollingElement
property, which returns a reference to the Element that scrolls the document. It is specified, but still a working draft.
请注意,documentElement
滚动元素并不总是(某些浏览器使用body
)。解决方案是新scrollingElement
属性,它返回对滚动文档的 Element 的引用。它被指定,但仍然是一个工作草案。
回答by user3815190
window.scrollTo(0, document.body.scrollHeight);
window.scrollTo(0, document.body.scrollHeight);
this will work..
这将工作..