Skip to content

Instantly share code, notes, and snippets.

@nathansmith
Last active November 27, 2023 04:51
Show Gist options
  • Select an option

  • Save nathansmith/8939548 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

Thanks!
I would use offset >= height

@aka-kar

aka-kar commented Mar 14, 2018

Copy link
Copy Markdown
    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
Copy Markdown

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

shunia commented Jul 9, 2018

Copy link
Copy Markdown

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

@crazy-geek94

crazy-geek94 commented Jul 21, 2018

Copy link
Copy Markdown

.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
Copy Markdown
$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // do something
  }
});

@iooe

iooe commented Nov 22, 2018

Copy link
Copy Markdown

@whitehorse0 jquery, meh

@yamankatby

Copy link
Copy Markdown

Not working on Safari

@audinue

audinue commented Mar 5, 2020

Copy link
Copy Markdown

FYI scrollTop on chrome android 80 returns float

@muhammadyahyaa

muhammadyahyaa commented Apr 1, 2020

Copy link
Copy Markdown

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

alexalannunes commented Feb 9, 2021

Copy link
Copy Markdown

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