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? Ed

Solution 1:

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.

Solution 2:

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

Solution 3:

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