angular scrollstart和scrollstop在指令中不会触发，而scroll会触发

Question

我有一个指令，如下：

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

使用HTML：

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

唯一会触发的事件是“scroll”事件。我需要另外两个事件，但不是这个，因为我正在处理移动设备，滚动事件只有在移动设备上滚动停止时才会触发(参见此处的http://andyshora.com/mobile-scroll-event-problems.html)

我需要在开始和结束时做一些自定义的事情。

知道我做错了什么吗？

Answer 1

如果你想使用bengro的想法，使用计时器来确定滚动结束的时间，你可以这样做：

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

    });
  }
 };
});