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

This comment has been minimized.

Copy link

@Choko256 Choko256 commented Jul 31, 2015

Works perfectly 👍 👍

@Irostovsky

This comment has been minimized.

Copy link

@Irostovsky Irostovsky commented Sep 22, 2015

Excelent!

@ysksn

This comment has been minimized.

Copy link

@ysksn ysksn commented Oct 6, 2015

like it :)

@hoanghiep90

This comment has been minimized.

Copy link

@hoanghiep90 hoanghiep90 commented Oct 20, 2015

Work like a boss

@jamshidasghari

This comment has been minimized.

Copy link

@jamshidasghari jamshidasghari commented Jan 7, 2016

thanks but this command don't work for me.
$(window).height() is equal to $(document).height() ?

@amigoow

This comment has been minimized.

Copy link

@amigoow amigoow commented Jan 18, 2016

Works inversely i.e when I scroll to the top of page only then it fires. Probably my system scroll is inverse?

@ultrasamad

This comment has been minimized.

Copy link

@ultrasamad ultrasamad commented Jan 19, 2016

@amigoow, I also had the same issue. I realized that my html, head and title elements were in caps. After changing them to lower cases, everything work perfect.

@Shaz3e

This comment has been minimized.

Copy link

@Shaz3e Shaz3e commented Mar 22, 2016

This works too

    $(window).scroll(function(){
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $('.s3cc-fixed').css('position','static');
        }else{
            $('.s3cc-fixed').css('position','fixed');
        }
    });
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented May 3, 2016

great commit !! thx

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jan 25, 2017

awesome!

@jimfilippou

This comment has been minimized.

Copy link

@jimfilippou jimfilippou commented May 7, 2017

Works! so happy! 😄

@liuliangsir

This comment has been minimized.

Copy link

@liuliangsir liuliangsir commented May 27, 2017

awesome

@areghunanyan

This comment has been minimized.

Copy link

@areghunanyan areghunanyan commented May 28, 2017

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

This comment has been minimized.

Copy link

@pohka pohka commented Jul 22, 2017

@areghunanyan it worked amazingly, thanks

@VictoriaLau

This comment has been minimized.

Copy link

@VictoriaLau VictoriaLau commented Aug 15, 2017

awesome!

@this-is-karthikking

This comment has been minimized.

Copy link

@this-is-karthikking this-is-karthikking commented Nov 24, 2017

@areghunanyan Pukka... Thank you so much.....

@vishalkumarchaudhary

This comment has been minimized.

Copy link

@vishalkumarchaudhary vishalkumarchaudhary commented Dec 14, 2017

Thanks a lot .
can you show how you can detect end of any html tag which has some class

@leonidaswander

This comment has been minimized.

Copy link

@leonidaswander leonidaswander commented Jan 24, 2018

@areghunanyan thanks

@skptricks

This comment has been minimized.

@caceres97

This comment has been minimized.

Copy link

@caceres97 caceres97 commented Feb 24, 2018

Great idea!!

@corics15

This comment has been minimized.

Copy link

@corics15 corics15 commented Apr 6, 2018

Nice!

@chandrakailash1993

This comment has been minimized.

Copy link

@chandrakailash1993 chandrakailash1993 commented Apr 13, 2018

not working in tablet

@nfouka

This comment has been minimized.

Copy link

@nfouka nfouka commented Jul 26, 2018

Good ! Tanks @

@kehollin

This comment has been minimized.

Copy link

@kehollin kehollin commented Aug 8, 2018

I like your used of explicit variables for clarity, but the difference between your scrollHeight and scrollPosition never went to zero because the $(window).scrolltop was a float/double that never maxed out, at least in Chrome Version 68.0.3440.84 (Official Build) (64-bit). Here's my solution:

    $(window).on("scroll", function() {
        var docHeight = $(document).height();
        var winScrolled = $(window).height() + $(window).scrollTop(); // Sum never quite reaches
        if ((docHeight - winScrolled) < 1) {
            console.log("event " + "module scrolled to bottom" + " @Model.documentFilename @Model.requestorId");
        }
    });
@alienjedi

This comment has been minimized.

Copy link

@alienjedi alienjedi commented Aug 14, 2018

All of these damn solutions do not work on mobile devices

@tiger8888

This comment has been minimized.

Copy link

@tiger8888 tiger8888 commented Aug 28, 2018

thanks! my boss

@phuonglop12a2

This comment has been minimized.

Copy link

@phuonglop12a2 phuonglop12a2 commented Aug 31, 2018

Thanks! Work Good!

@OneAdder

This comment has been minimized.

Copy link

@OneAdder OneAdder commented Sep 1, 2018

Thanks a lot!

@mamster12

This comment has been minimized.

Copy link

@mamster12 mamster12 commented Nov 21, 2018

works perfectly on desktop and mobile version!

@doganoo

This comment has been minimized.

Copy link

@doganoo doganoo commented Nov 24, 2018

works perfect, thank you!

@Thierkaz

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@mannajstu mannajstu commented Dec 20, 2018

awesome

@enetarch

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@wackyapps wackyapps commented Feb 1, 2019

Does this work in mobile browser with responsive layout bootstrap?

@Sathya-Kasithangam

This comment has been minimized.

Copy link

@Sathya-Kasithangam Sathya-Kasithangam commented Mar 21, 2019

Is it possible to pause between scrolls?

@jasonjersey

This comment has been minimized.

Copy link

@jasonjersey jasonjersey commented Mar 26, 2019

Does Not work on mobile

@maidulcu

This comment has been minimized.

Copy link

@maidulcu maidulcu commented Jun 15, 2019

Will this work on mobile on tap?

@Asad2175

This comment has been minimized.

Copy link

@Asad2175 Asad2175 commented Jul 1, 2019

but it does not works on the popup

@Risyandi

This comment has been minimized.

Copy link

@Risyandi Risyandi commented Jul 31, 2019

awesome

@f22hd

This comment has been minimized.

Copy link

@f22hd f22hd commented Aug 1, 2019

Awesome.

@alierdogan7

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@codebuilderspk codebuilderspk commented Aug 14, 2019

don't work on mobile devices.

@slidenerd

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@egocarib egocarib commented Oct 30, 2019

@areghunanyan - worked perfectly!

@stanley123george

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@BerninoScuro BerninoScuro commented Jul 9, 2020

potete mandare il file completo che visualizzi i valori

@BerninoScuro

This comment has been minimized.

Copy link

@BerninoScuro BerninoScuro commented Jul 9, 2020

vabbè, ho trovato il modo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.