Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
}
});
@OneAdder
Copy link

OneAdder commented Sep 1, 2018

Thanks a lot!

@mamster12
Copy link

mamster12 commented Nov 21, 2018

works perfectly on desktop and mobile version!

@doganoo
Copy link

doganoo commented Nov 24, 2018

works perfect, thank you!

@Thierkaz
Copy link

Thierkaz commented Dec 2, 2018

Hi,
is not necessary to have this operation :
if ((scrollHeight - scrollPosition) / scrollHeight === 0) because it's mean that (scrollHeight - scrollPosition) === 0.
So it's better and simpler to write this :
if ( scrollHeight - scrollPosition === 0 ) { }
Because that' way you easily change your value limit like this
if( scrollHeight - scrollPosition < 20 ) { }
if you want somethings happen when the user is 20 pixels about to reach the page bottom.

@mannajstu
Copy link

mannajstu commented Dec 20, 2018

awesome

@enetarch
Copy link

enetarch commented Jan 11, 2019

For those who find that this script doesn't work, check this property in your HMTL file .. < !DOCTYPE html >. As I found out, this can cause the window and document to report the same value, which breaks this script. This happens specifically in Chrome. And, if the tag is present, but specifies a URL after it, it may be necessary to remove the URL, or change it.

Welcome to the sauce that is the never ending problem of a Universal Interface.

jquery $(window).height() == $(document).height()
https://stackoverflow.com/questions/12103208/jquery-window-height-is-returning-the-document-height

@wackyapps
Copy link

wackyapps commented Feb 1, 2019

Does this work in mobile browser with responsive layout bootstrap?

@Sathya-Kasithangam
Copy link

Sathya-Kasithangam commented Mar 21, 2019

Is it possible to pause between scrolls?

@davidbrahm
Copy link

davidbrahm commented Mar 26, 2019

Does Not work on mobile

@maidulcu
Copy link

maidulcu commented Jun 15, 2019

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

Risyandi commented Jul 31, 2019

awesome

@f22hd
Copy link

f22hd commented Aug 1, 2019

Awesome.

@alierdogan7
Copy link

alierdogan7 commented Aug 14, 2019

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

@codebuilderspk
Copy link

codebuilderspk commented Aug 14, 2019

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

egocarib commented Oct 30, 2019

@areghunanyan - worked perfectly!

@stanley123george
Copy link

stanley123george commented Nov 12, 2019

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

hibadattebayo commented Nov 19, 2019

@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

kamleshwebtech commented Dec 7, 2019

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

BerninoScuro commented Jul 9, 2020

potete mandare il file completo che visualizzi i valori

@BerninoScuro
Copy link

BerninoScuro commented Jul 9, 2020

vabbè, ho trovato il modo.

@elmguz74
Copy link

elmguz74 commented Dec 11, 2020

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

PoKeumCho commented Dec 5, 2021

@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

Manoj-Manjunatha commented Mar 10, 2022

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