finding the maximum scroll position of a page

Question

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

score 47 · Accepted Answer · answered Jul 17 '13 at 11:33

47

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

answered Jul 17 '13 at 11:33

Neil Philip Whitehead

935
1
7
11

5

if you then minus limit by window.innerHeight that is the maximum scroll position.x – Neil Philip Whitehead Jul 17 '13 at 11:38
15

Not so far the truth : var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) - window.innerHeight; – Jordan Apr 01 '15 at 19:02
On Mac Chrome, if there is a x-axis scroll bar, this and you set `window.scrollY` what Jordan suggests, this will be a few pixels from the true bottom of the page – theicfire Oct 22 '19 at 20:15
You are an absolute life saver. Been looking far and wide for a solution. – AlanSTACK Apr 17 '22 at 03:21

yckart · Answer 2 · 2017-04-23T13:05:15.927

27

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.

edited Apr 23 '17 at 13:05

answered Apr 23 '17 at 12:49

yckart

32,460
9
122
129

2

window.scrollMaxY isn't supported in Chrome – FFF Oct 29 '18 at 22:29
1

This property is now non-standard and not on a standards track, so it won't work in many browsers – Tony Aug 08 '21 at 03:42

alutom · Answer 3 · 2013-07-17T02:50:30.443

17

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.

edited Jul 17 '13 at 02:50

answered Jul 17 '13 at 02:36

alutom

221
1
4

not quite perfect sorry, it wasn't cross browser compatible. I will post it under this: – Neil Philip Whitehead Jul 17 '13 at 11:32
@Neil - I didn't quite get your last comment. please share the issues you've found with this. – vsync Mar 24 '14 at 00:10
I have posted as a seperate answer on this post a cross browser friendly version.x – Neil Philip Whitehead Mar 24 '14 at 16:33

score 0 · Answer 4 · answered Sep 13 '22 at 19:19

My solution based on the solutions above and what I use in 2022.

AKA scrollMaxY

const scrollMaxValue = () => {
  const body = document.body;
  const html = document.documentElement;

  const documentHeight = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );

  const windowHeight = window.innerHeight;

  return documentHeight - windowHeight;
};

scrollMaxValue()

score -1 · Answer 5 · answered Jul 08 '14 at 06:57

-1

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

this will work..

answered Jul 08 '14 at 06:57

user3815190

23
1

finding the maximum scroll position of a page

5 Answers5

Linked