kątowe scrollstart i scrollstop nie ogień w dyrektywie, przewijać robi

Question

Mam dyrektywy jak poniżej:

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

Z HTML:

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

Jedynym wydarzeniem, które wystrzeliwuje jest 'scroll' zdarzenie. Potrzebuję dwóch pozostałych zdarzeń, a nie tego, ponieważ pracuję na urządzeniach mobilnych, a zdarzenia przewijania nie uruchamiają się, dopóki przewijanie nie zatrzyma się na urządzeniu mobilnym (zobacz tutaj http://andyshora.com/mobile-scroll-event-problems.html)

Potrzebuję zrobić coś niestandardowego na początku i na końcu.

Każdy pomysł, co robię źle?

Answer 1

Jeśli chcesz użyć pojęcia bengro z użytkownikiem za pomocą zegara, aby określić, kiedy zwój zakończyła mógłby zrobić coś takiego:

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

    }); 
    } 
}; 
});