finding the maximum scroll position of a page

2019-01-23 06:18发布

问题:

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.

No JQuery please.
Thank you.

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);
}

回答1:

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 );


回答2:

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

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.



回答3:

While this is not part of any specification, you could try window.scrollMaxY.

Returns the maximum number of pixels that the document can be scrolled vertically. 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.



回答4:

window.scrollTo(0, document.body.scrollHeight);

this will work..