<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.

<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.

• javascript
• jquery
• html
• css
• scroll

• it's working test – Fabio Commented Oct 7, 2014 at 8:45

6 Answers 6

"scroll" only works when the element is actually scrollable / scrolling. If you want scroll data regardless of element size, you can use "wheel" if your browser supports it.

document.addEventListener("wheel", function(event) {
    console.log(event);
});

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.

Well I can't see what's not working for you. Here is a working fiddle

Have to paste some code so:

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

Are you actually scrolling inside the #homeview-story div? So not the page itself, because the jquery scroll() event obvious needs that (http://api.jquery.com/scroll/)

Are you loading your custom CSS after the bootstrap CSS? Otherwise your div might still not be set to overflow:scroll. Hmm, on second thought it probably would since you are referencing an ID. Just to make sure then.

Put a 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);
   });
});

Hope this demo can help you in what you want to achieve.

I was facing the same problem as you do, and I solved it by putting that specific selector that I want to be triggered by the scroll() function inside the $(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 way of fixing this, but works fine for me.