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">

唯一发生火灾的事件是＆＃39;滚动＆＃39;事件。我需要另外两个事件，而不是这个，因为我正在处理移动和滚动事件，直到滚动在移动设备上停止为止（请参阅此处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);

    });
  }
 };
});

angular scrollstart和scrollstop不会在指令中触发，滚动会

1 个答案: