Skip to content

Instantly share code, notes, and snippets.

@nathansmith
Last active November 27, 2023 04:51
Show Gist options
  • Star 35 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save nathansmith/8939548 to your computer and use it in GitHub Desktop.
Save nathansmith/8939548 to your computer and use it in GitHub Desktop.
Check if the user is scrolled to the bottom of the page.
window.onscroll = function() {
var d = document.documentElement;
var offset = d.scrollTop + window.innerHeight;
var height = d.offsetHeight;
console.log('offset = ' + offset);
console.log('height = ' + height);
if (offset >= height) {
console.log('At the bottom');
}
};
@victorsferreira
Copy link

Thanks!
I would use offset >= height

@suvankarsarkar
Copy link

    window.onscroll = function() {
        var pageHeight=document.documentElement.offsetHeight,
        windowHeight=window.innerHeight,
        scrollPosition=window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);

        document.getElementById("val").innerHTML=pageHeight+','+windowHeight+','+scrollPosition;


        if (pageHeight <= windowHeight+scrollPosition) {
            alert('At the bottom');
        }
        };

@pedropmota
Copy link

Both solutions worked for me until I started using SemanticUI and their CSS added a 100% height to the html and body nodes.
Then, the solution was to use document.getElementById('root').offsetHeight as the "pageHeight" (with 'root' being a container that actually occupied 100% of the page height).

@shunia
Copy link

shunia commented Jul 9, 2018

Solution by @the-no-one is more compatable. The original solution won't work on some mobile browsers.

@crazy-geek94
Copy link

crazy-geek94 commented Jul 21, 2018

.innerHeight has different values in different browsers. It's not reliable to use .innerHeight for document and window elements.
It also has issues when the user's browser is zoomed in/out and won't work.

@whitehorse0
Copy link

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // do something
  }
});

@iooe
Copy link

iooe commented Nov 22, 2018

@whitehorse0 jquery, meh

@yamankatby
Copy link

Not working on Safari

@audinue
Copy link

audinue commented Mar 5, 2020

FYI scrollTop on chrome android 80 returns float

@muhammadyahyaa
Copy link

muhammadyahyaa commented Apr 1, 2020

Not working on Safari

The following code work for me in safari.

$(window).on("scroll", function() { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { }}

@alexalannunes
Copy link

alexalannunes commented Feb 9, 2021

Niceee 👏

But there's a problem with these solutions.
When the page is Zoomed.

The numbers of the height stays float

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment