JQuery scroll event refusing to trigger

Question

I need to perform some action when a certain class of elements scroll up and I am using JQuery to accomplish that. However, the event just wouldn't trigger no matter what I try.

HTML:

<div class="container-fluid article-matter" id="info-grid">
    <div class="row">
        <div class="col col-md-6 col-lg-2">
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
        </div>
        <div class="col col-md-6 col-lg-2">
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
        </div>
        <div class="col col-md-6 col-lg-2">
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
        </div>
        <div class="col col-md-6 col-lg-2">
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
        </div>
        <div class="col col-md-6 col-lg-2">
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
        </div>
        <div class="col col-md-6 col-lg-2">
            <div class="imagecontainer"><img /></div>
            <div class="imagecontainer"><img /></div>
        </div>
    </div>
</div>

JQuery (idea 1):

$('div#info-grid div.row div.col').each(function() {
    $(this).on('scroll', function(){
        console.log('test');
    });
});

JQuery (idea 2):

$('div#info-grid div.row div.col').on('scroll', function(){
    console.log('test');
});

Any inputs?

Are you sure you're 'scrolling' on those elements? Like - you need to have the overflow:auto set for the scroll bar to appear etc. — The Dembinski, Jan 29 '17 at 06:24
https://cdn.meme.am/cache/instances/folder308/500x/27987308.jpg — The Dembinski, Jan 29 '17 at 06:54
it looks like you misunderstood what scroll event is for. scroll event is triggered for any element when its content gets scrolled. if you want to check if your divs are being scrolled on your window, then you should listen to scroll event triggered by the container of your divs which actually scrolls(mostly window) and check the scroll value against your divs position to trigger some other callbacks. — Kiran Shakya, Jan 29 '17 at 07:17

score 0 · Accepted Answer · edited May 23 '17 at 12:33

0

So unless you have something to actually "scroll" - you can listen for other events.

Something like:

$('#foo').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) {
        alert('up');
    } else {
        alert('down');
    }
});

You can hide/change scroll bars etc.

This questions is also like: Use jQuery to check mousewheel event without scrollbar

edited May 23 '17 at 12:33

Community

1
1

answered Jan 29 '17 at 06:59

The Dembinski

1,469
1
15
24

JQuery scroll event refusing to trigger

1 Answers1