Angular scrollstart and scrollstop do not start in directive, scrolling

Question

I have a directive as shown below:

.directive('scrollPosition', function($window) { return { scope: { scroll: '=scrollPosition' }, link: function(scope, element, attrs) { var windowEl = angular.element($window); var scrollhandler = function() { console.log("scrolling") } var starthandler = function() { console.log("scrolling start") } var stophandler = function() { console.log("scrolling end") } windowEl.on('scroll', scope.$apply.bind(scope, scrollhandler)); windowEl.on('scrollstart', scope.$apply.bind(scope, starthandler)); windowEl.on('scrollstop', scope.$apply.bind(scope, stophandler)); } }; }); 

With HTML:

 <div id="imageHolder" style="opacity: {{scroll}}" scroll-position="scroll"> 

The only event that fires is the scroll event. I need two other events, not this, since I work on mobile and scrollable events that do not fire until scrolling stops on a mobile device (see here http://andyshora.com/mobile-scroll-event-problems .html )

I need to do something ordinary at the beginning and at the end.

Any idea what I'm doing wrong?

Answer 1

If you want to use bengro's idea of ​​using a timer to determine when scrolling has ended, you can do something like this:

 angular.module('App').directive('scroll',function(){ var timer = null; return{ scope:{ }, link: function (scope, element) { var stophandler = function() { console.log("scrolling end") } var starthandler = function() { console.log("scrolling start") } angular.element(element).bind('scroll', function () { scope.$apply.bind(scope, starthandler) clearTimeout(timer); timer = setTimeout(function () { scope.$apply.bind(scope, stophandler) }, 1500); }); } }; });