JavaScript – detect scroll to bottom inside an element or a document

Hello there, I am trying to create these demos with JavaScript code to detect whether the user has reached the bottom of a page or inside a scrollable div element with some height.

---

Detect when scrolled to the bottom of the page or a document

Open demo in a full window

JavaScript

window.onscroll = function(e) {
  if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 100)) {
    document.getElementsByClassName("status")[0].innerHTML = "<h2>You have reached to the bottom of the page</h2>";
  }else{
    document.getElementsByClassName("status")[0].innerHTML = "";
  }
};

---

Detect when scrolled to bottom inside a div element with class ‘container’

Open demo in a full window

JavaScript

document.getElementsByClassName("container")[0].onscroll = function(e) {
  if( this.scrollTop > (this.scrollHeight - this.offsetHeight - 50)){
    document.getElementsByClassName("status")[0].innerHTML = "<h2>You have reached to the bottom of the div</h2>";
  }else{
    document.getElementsByClassName("status")[0].innerHTML = "";
  }
};