找到页面的最大滚动位置

Nei*_*ead 15 javascript scroll

我已经使页面的主体高200%,以便它适合屏幕两次.使用javascript我滚动时会一直滚动到顶部或底部.为此,我需要在任何浏览器或屏幕大小上找到页面的最低滚动点,以便在它到达时停止.

请不要JQuery.
谢谢.

我的代码:(它仍然被放在一起所以需要一些工作)

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);
}
Run Code Online (Sandbox Code Playgroud)

Nei*_*ead 24

这是跨浏览器兼容的版本:

var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight, 
                   document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
Run Code Online (Sandbox Code Playgroud)

  • 事实并非如此:var limit = Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight) - window.innerHeight; (10认同)
  • 如果你那么减去window.innerHeight的限制,这是最大的滚动位置 (3认同)

alu*_*tom 16

var limit = document.body.offsetHeight - window.innerHeight;
// document.body.offsetHeight = computed height of the <body>
// window.innerHeight = available vertical space in the window
Run Code Online (Sandbox Code Playgroud)

相比 xy[1] < limit

注意:您可能需要通过主体的边距和/或填充来增加值.您也可以尝试使用clientHeight而不是offsetHeight.


yck*_*art 8

虽然这不是任何规范的一部分,但您可以尝试window.scrollMaxY.

返回文档可以垂直滚动的最大像素数. https://developer.mozilla.org/docs/Web/API/Window/scrollMaxY


如果不可用则回退:

var scrollMaxY = window.scrollMaxY || (document.documentElement.scrollHeight - document.documentElement.clientHeight)
Run Code Online (Sandbox Code Playgroud)

注意,documentElement并不总是滚动元素(一些浏览器使用body).解决方案是new scrollingElement属性,它返回对滚动文档的Element的引用.它已指定,但仍然是工作草案.

  • Chrome 不支持 window.scrollMaxY (2认同)