CODEWITHSUNDEEP
javascriptscroll
Neil Philip Whitehead
Neil Philip Whitehead

Reputation: 993

finding the maximum scroll position of a page

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

Upvotes: 32

Views: 71484

Answers (5)

the-teacher
the-teacher

Reputation: 607

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

Upvotes: 1

yckart
yckart

Reputation: 33408

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.

Upvotes: 27

user3815190
user3815190

Reputation: 23

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

this will work..

Upvotes: -1

Neil Philip Whitehead
Neil Philip Whitehead

Reputation: 993

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

Upvotes: 49

alutom
alutom

Reputation: 221

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.

Upvotes: 17

Related Questions