Scroll event in AngularJS

Question

I have a div with a scrollbar in it. Now I want to get an event, that triggers every time, the user scrolls.

Is that possible in AngularJS, or do I have to use jQuery for that?

Edit: I came up with following so far:

// JS
.directive('scroll', function() {
    return function(scope, element, attrs){

        angular.element(element).bind("scroll", function(){
            console.log(1);
        });
    };
});

// HTML
<div class="wrapper" style="height: 1550px" scroll>
[...]
</div>

But that does not work (I don't see any logs in my Firebug-Console).

Sergey NN · Accepted Answer · 2017-04-03 15:46:51Z

16

Solution for Angular 1.6:

.directive("scroll", function () {
return {
  link: function(scope, element, attrs) {
      element.bind("wheel", function() {
         console.log('Scrolled below header.');
      });
  }
}

})

Use "wheel" instead of "scroll". It takes me few hours to find.

answered Apr 3, 2017 at 15:46

Sergey NN

8268 silver badges10 bronze badges

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

1 Comment

Vahid Montazer Over a year ago

We should use angular.element(document) instead of angular.element('html') : )

weisk · Accepted Answer · 2014-10-27 13:22:43Z

4

You would be using jquery for adding the event listener, and maybe inside an angularjs directive to attach it to an element.

page.html:

<div my-scroller>

myscroller.js:

app.directive('myScroller', function(){

    return {

        restrict: 'A',
        link: function(scope,elem,attrs){
            $(elem).on('scroll', function(evt){
               console.log(evt.offsetX + ':' + evt.offsetY);
            });
        }

    }

});

Edit: of course you don't even need to use jquery. Angular's jqLite suffices for this, you would just call element without the jquery wrapping:

elem.on('scroll', ...

edited Oct 27, 2014 at 13:22

answered Oct 27, 2014 at 13:15

weisk

2,5402 gold badges20 silver badges18 bronze badges

4 Comments

NevilleS Over a year ago

Note that this doesn't necessarily use jQuery, it's using jqLite (docs.angularjs.org/api/ng/function/angular.element)

weisk Over a year ago

@NevilleS correct, I wrapped it inside $() so it uses jQuery.

NevilleS Over a year ago

You don't need to though; jqLite provides the on() method as well (with some restrictions), avoiding the need to include jQuery.

Tream Over a year ago

Thank you for your reply, @frankies. I edited my post and added the code, I already tried. If there is any chance to do it without jQuery, I would like to it without.

Developer A · Accepted Answer · 2018-02-12 12:10:03Z

1

Sergey's answer helped me a little, but what ended up working for me was this:

.directive("scroll", function ($window) {
   return {
      link: function() {
         angular.element($window).bind("wheel", function() {
            console.log('Scrolling');
         });
      }
   }
})

answered Feb 12, 2018 at 12:10

Developer A

112 bronze badges

Collectives™ on Stack Overflow

Scroll event in AngularJS

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related