How to detect if the user scrolled at the end of the window?

Question

using the following will execute action even if the user crolls from the end to the start. I want just when the user scrolls down vertically

if( $(window).scrollTop() + $(window).height() == $(document).height() ) {

     //do stuff
}

this is my code so far,

   function addEvent( obj, type, fn ) {


     if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
       obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
       obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
      obj.addEventListener( type, fn, false );

   }
  addEvent(window, 'scroll', function(event) {

    if( $(window).scrollTop() + $(window).height() == $(document).height() )  {
    load();
    }

});

http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event — , Sep 12 '14 at 16:49

score 0 · Answer 1 · answered Sep 12 '14 at 16:36

0

window.onscroll = function(e) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // do stuff
    }
};

answered Sep 12 '14 at 16:36

David Lounsbrough

389
1
8

1

this doesn't work on IE unfortunately – N.G Sep 12 '14 at 16:39
Yeah, good call, I had just come to that same conclusion. I originally tried it in Chrome. – David Lounsbrough Sep 12 '14 at 16:40
window.onscroll = function(e) { if ((window.innerHeight + document.documentElement.scrollTop) >= document.body.offsetHeight) { alert("bottom"); } }; – David Lounsbrough Sep 12 '14 at 16:44
Basically replace window.ScrollY with document.documentElement.scrollTop and you should be good. – David Lounsbrough Sep 12 '14 at 16:44
Tested in Firefox, Chrome, and IE this time ;) – David Lounsbrough Sep 12 '14 at 16:45
that doesn't work not even with chrome – N.G Sep 12 '14 at 16:47
It worked for me. I'll go try to break it. – David Lounsbrough Sep 12 '14 at 16:47
I updated Chrome and then I had to use this: window.pageYOffset || document.documentElement.scrollTop. My Firefox and IE are current and this fixed the Chrome compatibility with the new version. – David Lounsbrough Sep 12 '14 at 16:53
Seems like there should be a more standard way, but I suppose that's the nature of the beast with web design. – David Lounsbrough Sep 12 '14 at 16:54
Let me know if that's working for you too. – David Lounsbrough Sep 12 '14 at 16:56
1

@ David Lounsbrough : yes your last solution works ! but then , when working on an application that should be delivered to a client; we really should not tell them that browser must be updated to make it work. which make me wonder if this works on not updated browsers or not – N.G Sep 13 '14 at 13:24
Yeah, I only tested this one in the most updated browsers, hard to say how far back you'd have to go to break it. Good luck with your testing. – David Lounsbrough Sep 13 '14 at 13:41

Ehsan Sajjad · Answer 2 · 2014-09-12T16:43:00.700

0

This works:

$(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

or this:

$(window).scroll(function() {   
       if($(window).scrollTop() + $(window).height() > $(document).height()) {
           alert("bottom!");
       }
    });

See How to detect user reached bottom of page while scrolling

Also you may be interested in Infinite Scroll Paging using Jquery and Ajax

edited Sep 12 '14 at 16:43

answered Sep 12 '14 at 16:37

Ehsan Sajjad

61,834
16
105
160

I tried this, but some how my action is executed whether I scroll down or up – N.G Sep 12 '14 at 16:40
1

well , that was my initial try...s mentionned in the post – N.G Sep 12 '14 at 16:44
@N.G see the second link i posted in the edit, i implemented it in my application and it works fine – Ehsan Sajjad Sep 12 '14 at 16:45
I'm also confused, it should have worked properly but it works fine with IE but on firefox and chrome it works when I scroll up and not down, I may be making something wrong, please see edit for the whole code. – N.G Sep 13 '14 at 13:27

score 0 · Answer 3 · answered Sep 12 '14 at 16:47

0

try this

 $(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height()) {
        //your stuffs here
    }
});

answered Sep 12 '14 at 16:47

Shreeraj Karki

234
2
11

How to detect if the user scrolled at the end of the window?

3 Answers3