scroll() event not firing when attached to a div

Question

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

Answer 1

"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);
});