How to determine when user scrolls to bottom of container div? For Infinite Scroll

Question

I'm preparing to develop infinate scroll on our website's dashboard, however I'm stuck at the moment on how to determine the bottom of the container div in my jsfiddle mockup.

Original function, which works on a blank page with no container div

var wireInfinScroll = function() {

    console.log('in wireInfinScroll');

    $('#scroll_screen').scroll(function(){

        console.log('scrolling...');
        console.log(' ');

        //if ($('#scroll_screen').scrollTop() == $('#content').height() -     $('#scroll_screen').outerHeight()) {
  
        if ($('#scroll_screen').scrollTop() == $('#content').height() - $('#scroll_screen').height()) {
            // run our call for pagination
            console.log('Bottom of Page!');
            alert('Bottom of Page!');
        }
    });
}

wireInfinScroll();

CSS

#scroll_screen {
  overflow-y: auto;
  background: pink;
}

I tried replacing window with the div being scrolled (#scroll_screen) in my example, but can't get the alert to trigger.

How would you have approached this problem?

---

UPDATES

• Note, I created a new jsFiddle using the same code here: http://jsfiddle.net/leonwho/L9A6Q/

• Also I notice that my console.logs never show unless I click inside the #scroll_screen div?

• Deleted the Codepen, got a little further with jsFiddle, using $('#scroll_screen').scroll(function(){

• Note! When I remove height: 100% from the #content div, then scroll down and back up I finally get my Alert, but this is still not correct. The Alert should happen on scroll down

css

   #content {
     float: right;
     width: 79%;
     //height: 100%;
     background: #f8f8f8;
   }

Answer 1

$('#scroll_screen').height() - $('#content').height() will give a negative value, because scroll_screen's height is always less than content's height, and that means scroll_screen's scrollTop will never be equal to a negative value, so replace

$('#scroll_screen').scrollTop() == $('#scroll_screen').height() - $('#content').height()

with

$('#scroll_screen').scrollTop() >=  if ( $('#scroll_screen').scrollTop() >= -($('#content').height() - $('#scroll_screen').height()) ))

(Greater than or equal just in-case the animation skips it.)

[EDIT] I noticed it scrolls to 200, so if ($('#scroll_screen').scrollTop() >= 200) should work.

Answer 2

You just have to check if (the scroll distance + the window height) >= (the offset top of the element + its height) in your scroll method.

In this case, something like :

$(window).scroll(function(){
  if( ($(document).scrollTop() + $(window).height()) >= ($('#yourElement').offset().top + $('#yourElement').height()){
    // Bottom of the element reached :)
  }
});