CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Randeep
Randeep

Reputation: 99

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.

Upvotes: 5

Views: 28344

Answers (6)

Jacksonkr
Jacksonkr

Reputation: 32207

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

Upvotes: 8

Beyon
Beyon

Reputation: 1

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.

Upvotes: -2

T J
T J

Reputation: 43156

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.

Upvotes: 6

specialone
specialone

Reputation: 130

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.

Upvotes: 0

DebbieMiller
DebbieMiller

Reputation: 452

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

Upvotes: 1

Roy Prins
Roy Prins

Reputation: 3080

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.

Upvotes: 0

Related Questions