停止动量滚动 ontouchstart ngTouch AngularJS答案

【问题标题】：Stop momentum scrolling ontouchstart ngTouch AngularJS停止动量滚动 ontouchstart ngTouch AngularJS
【发布时间】：2014-08-06 05:35:30
【问题描述】：

我有一个带有 -webkit-overflow-scrolling:touch 的 div，其中包含项目列表。

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

但是，当我滚动我的列表，并且 ios 原生动量滚动启动时，我也希望能够通过点击停止动量滚动，就像在原生 ios 应用程序上一样。

发生的情况是触发了另一个点击事件。所以我的问题是：

如何在不触发另一个实际的点击事件的情况下停止动量（本机）滚动，而不触发另一个实际的点击事件...

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

【问题讨论】：

完全清楚。我遇到了同样的问题，即点击错误的链接。我想在第一次点击时停止滚动，并在第二次点击时执行链接操作。解决这个问题有任何成功吗？这个帖子可以帮助吗：stackoverflow.com/questions/13812936/…
这有什么新的吗？ @SergevandenOever

标签： javascript ios angularjs cordova

【解决方案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() 函数中的 where 会不断触发。在这个函数中你应该保存一个时间戳：

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

【讨论】：