angular scrollstart and scrollstop don't fire in directive, scroll does

Question

I have a directive as 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 the other two events and not this, as I am working on mobile and scroll events don't fire until the scrolling stops on mobile (see here http://andyshora.com/mobile-scroll-event-problems.html)

I need to do something custom on start and on 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 the scroll has ended you could 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);

    });
  }
 };
});