Winkel scrollstart und scrollstop nicht Feuer in der Richtlinie, rolle tut

Question

ich eine Richtlinie haben, wie unten:

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

Mit HTML:

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

Das einzige Ereignis, das ausgelöst wird ist die 'Scroll' Veranstaltung. Ich brauche die anderen beiden Ereignisse und nicht das, da ich gerade an mobilen und Scroll-Events fire, bis das Scrollen auf Mobile aufhört (siehe hier http://andyshora.com/mobile-scroll-event-problems.html)

Ich muss am Anfang und am Ende etwas Brauchbares machen.

Irgendeine Idee, was ich falsch mache?

Answer 1

Wenn Sie bengro die Idee der Verwendung eines Timers, um zu bestimmen, wenn die Scroll Sie etwas tun zu Ende ist zu verwenden:

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

    }); 
    } 
}; 
});