停止动量滚动ontouchstart ngTouch AngularJS

Stop momentum scrolling ontouchstart ngTouch AngularJS

本文关键字：ontouchstart ngTouch AngularJS 滚动      更新时间：2023-09-26

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

我正在使用Angular的ngTouch，它会把我所有的ng-click作为phonegap应用的tap事件来处理。

然而，当我滚动我的列表时，ios原生动量滚动开始生效，我希望能够通过点击来停止动量滚动，就像你在原生ios应用程序上做的那样。

将触发另一个tap事件。所以我的问题是:

如何通过点击停止动量(原生)滚动，而不触发另一个实际的点击事件…

最近我在我的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();
}

最后一步是检查离子上下文中的每个ng-click是否为lastScrollTimestamp:

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