Detect the scrolling to bottom of the page using jQuery.

jquery-scroll-bottom.js

$(window).on("scroll", function() {
	var scrollHeight = $(document).height();
	var scrollPosition = $(window).height() + $(window).scrollTop();
	if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
	    // when scroll to bottom of the page
	}
});

Will this work on mobile on tap?

but it does not works on the popup

awesome

Awesome.

Google Chrome gives the full height of the page if you call $(window).height()

Instead, use window.innerHeight to retrieve the height of your window.
Necessary check should be:

    if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
        console.log("reached bottom!");
    }

don't work on mobile devices.

NON JQUERY version

 let listContainer = document.getElementById('news_list_container');
    listContainer.addEventListener('scroll', function(e) {
      // https://stackoverflow.com/questions/876115/how-can-i-determine-if-a-div-is-scrolled-to-the-bottom
//       https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery, 12px buffer to make this work properly
      if (listContainer.scrollTop >= (listContainer.scrollHeight - listContainer.offsetHeight - 12)) {
        console.log('we are at the bottom now', listContainer.scrollTop, listContainer.scrollHeight - listContainer.offsetHeight) ;
      }
    });

@areghunanyan - worked perfectly!

I had the same issue, but none of these solutions helped me. For whom it is not not working just try this code and you are done

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

This code works perfect!

How to modify this code to trigger event 100px before bottom?
Is it possible?

@stanley123george i am wondering the same, but then about whether it is possible to trigger the event for a certain div

don't work on mobile devices.

I also had the same problem with you. On mobile don't work. Can anyone help me? Please!!!

How to detect when user scrolls to the bottom of a div ? - This worked for me.

https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div

if ((document.querySelector("body").offsetHeight - document.documentElement.scrollTop < Math.max(document.documentElement.clientHeight, window.innerHeight || 0))) {
 // on bottom
}

better non-jquery version

works perfect! I tried a lot suggestions and no one worked.. but this one is perfect!..
I'm implementing an endless scrolling function

potete mandare il file completo che visualizzi i valori

vabbè, ho trovato il modo.

Funciona al 100, thanks!

find out particular elements scroll bottom
$(".user_container").scroll(function(e){
console.log()
var scrollHeight = $(this).find("table").height(); //user_container inside elements height
var currentElementHeight = $(this).height()
var scrollMax = scrollHeight - currentElementHeight;
if(scrollMax == $(this).scrollTop()){
console.log("reached at Bottom");
}
})

@areghunanyan thanks

$(window).scroll(function() {  
    var scrollHeight = window.scrollY || $(window).scrollTop();                                          
        if ((window.innerHeight + scrollHeight) >= document.body.offsetHeight) {                       
            // do something                                                    
        }                                                                                                                
}); 

I fixed little bit to work on ie too. this works fine for me.

If you want to do it in a element scroll, you can do this:

// ...
        var parent = $('#parent')
        var child = $('#child')
parent.on("scroll", function() {
	if (parent.scrollTop()+parent[0].offsetHeight-child[0].scrollHeight === 0) {
	    // when scroll to bottom of the page
	}
});

Awesome, thanks. This should be the first result for anyone who is searching for 'detect scroll to botton of page using jquery'.