Check if the user is scrolled to the bottom of the page.

scroll-offset.js

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

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

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

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

.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.

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

@whitehorse0 jquery, meh

Not working on Safari

FYI scrollTop on chrome android 80 returns float

Not working on Safari

The following code work for me in safari.

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

Niceee 👏

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

The numbers of the height stays float