Scrolling events in AngularJS

Question

I have a div with a scroll bar. Now I want to get an event that fires every time the user scrolls.

Is this possible in AngularJS, or do I need to use jQuery for this?

Edit: I came up with the following:

// 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 this does not work (I do not see any logs in my Firebug console).

Answer 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 the "wheel" instead of the "scroll". It takes me a few hours.

Answer 2

You would use jquery to add an event listener, and possibly to the 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 jqLite is enough for this, you just call the element without a jquery wrapper:

 elem.on('scroll', ... 

Answer 3

Sergey's answer helped me a little, but what worked for me was as follows:

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