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

Is it possible to pause between scrolls?

Does Not work on mobile

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