Randeep Randeep - 5 months ago 18
Javascript Question

scroll() event not firing when attached to a div

<div class="row">
<div class="col-md-8" id="homeview-story"></div>
<div class="col-md-4" id="homeview-stream">
<div id="log"></div>
</div>
</div>


#homeview-story {
overflow: scroll;
width: 72%;
height: 800px;
}
#homeview-stream {
overflow: scroll;
width: 28%;
height: 800px;
}


$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});


Objective is to implement infinite scrolling for both
homeview-story
and
homeview-stream
separately to load respective data. The scroll function works on the window obj (
$(window).scroll
) but is not working with specific div.

T J T J
Answer

The issue is that, #homeview-story isn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.

Here's a Demo, where #logo has a height greater than it's parent #homeview-stream and we're listening to it's scroll.