Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@toshimaru
Last active May 31, 2022 10:55
Show Gist options
  • Save toshimaru/6102647 to your computer and use it in GitHub Desktop.
Save toshimaru/6102647 to your computer and use it in GitHub Desktop.
Detect the scrolling to bottom of the page using jQuery.
$(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
}
});
@wackyapps
Copy link

Does this work in mobile browser with responsive layout bootstrap?

@Sathya-Kasithangam
Copy link

Is it possible to pause between scrolls?

@dovidezra
Copy link

Does Not work on mobile

@maidulcu
Copy link

Will this work on mobile on tap?

@Asad2175
Copy link

Asad2175 commented Jul 1, 2019

but it does not works on the popup

@Risyandi
Copy link

awesome

@f22hd
Copy link

f22hd commented Aug 1, 2019

Awesome.

@alierdogan7
Copy link

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

@hillbilly300
Copy link

don't work on mobile devices.

@slidenerd
Copy link

slidenerd commented Sep 28, 2019

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

@egocarib
Copy link

@areghunanyan - worked perfectly!

@stanley123george
Copy link

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?

@hibadattebayo
Copy link

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

@DoHue97
Copy link

DoHue97 commented Dec 3, 2019

don't work on mobile devices.

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

@kamleshwebtech
Copy link

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

@HonbraDev
Copy link

HonbraDev commented Mar 29, 2020

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

better non-jquery version

@chajere
Copy link

chajere commented May 13, 2020

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

@BerninoScuro
Copy link

potete mandare il file completo che visualizzi i valori

@BerninoScuro
Copy link

vabbè, ho trovato il modo.

@elmguz74
Copy link

Funciona al 100, thanks!

@zaqihsn
Copy link

zaqihsn commented Dec 18, 2020

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

@PoKeumCho
Copy link

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

@GabrielHilgert
Copy link

GabrielHilgert commented Dec 27, 2021

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

@Manoj-Manjunatha
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment