javascript - 停止动量滚动 ontouchstart ngTouch AngularJS

Question

我有一个带有 -webkit-overflow-scrolling:touch 的 div，里面有一个项目列表。

我正在使用 Angular ngTouch，它将我所有的 ng-clicks 处理为 phonegap 应用程序上的点击事件。

但是，当我滚动我的列表时，ios 原生动量滚动开始，我希望也能够通过点击停止动量滚动，就像您在原生 ios 应用程序上所做的那样。

发生的是另一个点击事件被触发。所以我的问题是:

如何在不触发另一个实际点击事件的情况下通过点击停止动量( native )滚动...

希望我的问题很清楚...

Answer 1

最近我在我的 angular-ionic-typeScript 项目中遇到了同样的问题。这是我如何解决它的:

我创建了一个自定义指令:

angular.module('directive.scrolldetector', [])
    .directive('scrollDetector', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$on('$destroy', () => {
                element.off("scroll");
            });

            element.on('scroll', function () {
                scope.$evalAsync(function () {
                    scope.$eval(attrs.scrollDetector);
                });
            });
        }
    }
});

现在您可以像这样检测 onScrollEvent:

<ion-content scroll-detector="onScroll()">
...
</ion-content>

当您滚动时，onScroll() 函数将持续触发。在这个函数中你应该保存一个时间戳:

onScroll = () => {
    lastScrollTimestamp = (new Date()).getTime();
}

最后一步是检查 ion-context 中的每个 ng-click 是否有我们的 lastScrollTimestamp:

onClick = () => {
     if( lastScrollTimestamp + 300 > (new Date()).getTime()) { //at least 300ms there was no scrolling
          //do your stuff
     }
}