function yHandler () {

    var show = document.getElementById('show');
    var contentHeight = show.offsetHeight;
    var yOffset = show.pageYOffset;
    var y = yOffset + show.innerHeight;

    if(y >= contentHeight) {
        alert("ok")
        }
    }
    show.onscroll  = yHandler;

how to check if the scrollbar has reached the end of div?

function yHandler () {

    var show = document.getElementById('show');
    var contentHeight = show.offsetHeight;
    var yOffset = show.pageYOffset;
    var y = yOffset + show.innerHeight;

    if(y >= contentHeight) {
        alert("ok")
        }
    }
    show.onscroll  = yHandler;

how to check if the scrollbar has reached the end of div?

• javascript

• Possible duplicate of stackoverflow./questions/8480466/… – Vignesh Paramasivam Commented Sep 25, 2013 at 13:01

3 Answers 3

Some code for you to work on:

var scroll = document.getElementById('scroll');
var content = document.getElementById('content');

scroll.onscroll = function(){
    var total = scroll.scrollTop + scroll.clientHeight;

    if(total == content.clientHeight)
        alert('Reached bottom!');
}

http://jsfiddle/EY6qP/

Thor's method works perfectly well (+1), but you could also rely on scrollHeight.

(function(scroll){
  scroll.onscroll = function(){
    if (scroll.scrollTop + scroll.clientHeight == scroll.scrollHeight) {
      console.log('hither!');
    }
  }
})(document.getElementById('scroll'));

Use scrollHeight, scrollTop and clientHeight attributes to detect the scroll bar reached bottom end or not.

function handleScroll() {
    var div = document.getElementById("div-id");
    if(Math.abs(Math.round(div.scrollHeight - div.scrollTop) - div.clientHeight) > 3) {
        console.log("Scroll bar reached bottom end");   
        return true;
    }
    return false;
};