Clever Geek Handbook

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.

+3


source to share


6 answers


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.

+2


source


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.

0


source


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


source


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.

0


source


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


source


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.

-1


source






More articles:


All Articles