Jquery Scroll event is not firing

Question

I am trying to trigger an scroll event using class element. I tried multiple scenarios but no good.

Below are types of events tried...

jQuery(function($){
     $('[class="ag-body-container"]').bind('scroll',function() {
      alert("hai");
     });
 });

$(document).ready(function(){
        $(".ag-body-viewport-wrapper").bind('scroll',function() {
            alert("hai");
        });
});

$(document).on('scroll', '.ag-body-container', function(){ 
        console.log('scroll happened');
});

$(function() {
     $(".ag-body-container").on('scroll', function () { 
       console.log('scroll happened'); 
      });
});

$(".ag-body-container").bind('scroll', function() {
       console.log('Event worked');
});

Non of the above gives expected result.

Edgars Aivars · Accepted Answer · 2016-07-13 17:47:39Z

1

you havent tried

$(document).ready(function(){
    $(document).on('scroll', '.ag-body-container', function(){ 
        console.log('scroll happened');
    });
});

OR

 $(document).ready(function(){
    $(window).on('scroll', '.ag-body-container', function(){ 
        console.log('scroll happened');
    });
});

answered Jul 13, 2016 at 17:47

Edgars Aivars

1813 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edgars Aivars Over a year ago

it will fire only if .ag-body-container is scrollable so if it is overflowed and you scroll it

Community · Accepted Answer · 2017-05-23 12:01:35Z

0

try .on instead of .bind or you can use .scroll.

Because, .bind may be removed from future versions at any time. There is no reason to keep using .bind and every reason to prefer .on instead.

See jquery .bind() vs. .on()

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jul 13, 2016 at 17:53

Rahul K

9385 silver badges17 bronze badges

Comments

Deep · Accepted Answer · 2016-07-13 18:16:15Z

0

The scroll event occurs when the user scrolls in the specified element.

The scroll event works for all scrollable elements and the window object (browser window).

if window is scrollable than the below code will fired.

 $(function() {
     $(window).on('scroll', function () { 
       console.log('scroll happened'); 
      });
});

but if you are trying to something like this.

 $(".ag-body-container").on('scroll', function () { 
       console.log('scroll happened'); 
      });

if the element identified by '.ag-body-container' is scrollable , then only event will be fired.

check the plunker : http://plnkr.co/edit/QCMSsfGgggjaHVWDdNp9?p=preview

edited Jul 13, 2016 at 18:16

answered Jul 13, 2016 at 18:07

Deep

9,7962 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery Scroll event is not firing

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related