Scroll () doesn't fire when connected 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>");
});
});
The goal is to implement infinite scrolling for homeview-story
and homeview-stream
separately for loading the relevant data. The scroll function works on the obj ( $(window).scroll
) window , but doesn't work on a specific div.
The problem is it #homeview-story
doesn't overflow, so it's not scrolling. First of all, it needs to have some content that is larger than scrollable, which is missing from your code.
Here is the Demo , where it #logo
has a height greater than the parent #homeview-stream
, and we listen to its scrolling.
Are you actually scrolling inside the # homeview-story div? So not the page itself, because it is obvious for the jquery scroll () event that ( http://api.jquery.com/scroll/ )
Are you loading your own CSS after the loading CSS? Otherwise, your div cannot yet be set to overflow: scroll. Hmm, thought that probably since you reference the id. Just make sure then.
Ok I can't see what doesn't work for you. Here's the fiddle working
We'll have to paste the code like this:
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Place the inner div in # homeview-story
<div class="row">
<div id="homeview-story">
<div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>
$(document).ready(function() {
$('#homeview-story').bind('scroll',function() {
var html = "<div id='log'>Hello</div>";
$('#homeview-stream').append(html);
});
});
Hopefully this demo will help you with what you want to achieve.
"scroll"
only works when the element is actually scrolling / scrolling. If you want to scroll through the data regardless of the size of the element, you can use "wheel"
if your browser supports it.
document.addEventListener("wheel", function(event) {
console.log(event);
});
I ran into the same problem as you and solved it by putting this special selector which I want to trigger using scroll() function
internally $(window).scroll() function
like this:
$(window).scroll(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
I'm not sure if this solution is correct, but works great for me.