CODEWITHSUNDEEP
javascriptangularjs
Tream
Tream

Reputation: 1054

Scroll event in AngularJS

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).

Upvotes: 8

Views: 27736

Answers (3)

Developer A
Developer A

Reputation: 11

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

Upvotes: 1

Sergey NN
Sergey NN

Reputation: 806

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.

Upvotes: 16

weisk
weisk

Reputation: 2540

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', ...

Upvotes: 4

Related Questions