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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:12:33  来源:igfitidea点击:

finding the maximum scroll position of a page

javascriptscroll

提问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 clientHeightinstead 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, documentElementisn't always the scrolling element (some browsers use bodyinstead). The solution is the new scrollingElementproperty, 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..

这将工作..