Why my jQuery scoll event doesnt work?

Question

I am a newbie in jQuery. Basically, I need to write a query for lazy loading on a page. I found this post: Detecting when user scrolls to bottom of div with jQuery and I wanted to try the query from there:

jQuery(function($) {
  $('#pics').bind('scroll', function() {
    if($(this).scrollTop() +
       $(this).innerHeight() >= this.scrollHeight) {
      alert('end reached');
    }
  });
});

However, for me it didnt work, and I decided to create a simple (very simple) page and to test if the script will work there. Here is my code:

jQuery(function($) {
  $('#pics').bind('scroll', function() {
    if($(this).scrollTop() +
       $(this).innerHeight() >= this.scrollHeight) {
      alert('end reached');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>YEAH SANDWICHES</h1>
<div id="pics">
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
</div>

However, all images are pre-loaded and the jQuery script doesn't work at all. What am I doing wrong?

Try putting the jquery function in $document.ready() and check... — bhanu.cs, Jun 18 '15 at 09:51
Even though it is wrong, I have updated the HTML in your question! Replaced all the `` to `
`. Please learn `HTML`. — Praveen Kumar Purushothaman, Jun 18 '15 at 09:52
@BhanuChowdary `jQuery(function($) {` is the short version of `$(document).ready() ` — empiric, Jun 18 '15 at 09:52
The `#pics` should have `overflow:scroll` and a defined height http://jsfiddle.net/vmxrca1d/9/ — Shaunak D, Jun 18 '15 at 09:57
it's look jquery is the troubler , i think in your side baybe — viyancs, Jun 18 '15 at 09:57
This [http://jsfiddle.net/t55whmxb/](http://jsfiddle.net/t55whmxb/) — lshettyl, Jun 18 '15 at 10:04

Shaunak D · Accepted Answer · 2015-06-20T11:30:17.520

3

Form the docs scroll():

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

Add these css properties to #pics

Fiddle

#pics{
    overflow:scroll;  //overflow-y:scroll
    height:500px
}

edited Jun 20 '15 at 11:30

answered Jun 18 '15 at 10:03

Shaunak D

20,588
10
46
79

How is this different from my answer? `:)` – Praveen Kumar Purushothaman Jun 18 '15 at 10:05
I had answered this **[way before](http://stackoverflow.com/questions/30912016/why-my-jquery-doesnt-work/30912313#comment49861697_30912016)** your edited you deleted answer. I was just busy attaching relevant and appropriate docs. – Shaunak D Jun 18 '15 at 10:06

Praveen Kumar Purushothaman · Answer 2 · 2015-06-18T10:01:41.277

You need to have a scroll on the #pics to use the scroll option. I don't know why you use jScroll, but I removed it. You can use this way:

Working Snippet

Just go to the end of the page and check the alert!

$(function() {
  $("#pics").scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
      console.log('end reached');
    }
  });
});

#pics {height: 300px; overflow: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>YEAH SANDWICHES</h1>
<div id="pics">
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;"/><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
</div>
<script>
  jQuery(function($) {
    $('#pics').bind('scroll', function() {
      if($(this).scrollTop() +
         $(this).innerHeight() >= this.scrollHeight) {
        alert('end reached');
      }
    })
  });
</script>

Why my jQuery scoll event doesnt work?

2 Answers2