Stop momentum scrolling ontouchstart ngTouch AngularJS

Question

I have a div with -webkit-overflow-scrolling:touch with a list of items in it.

I am using Angular ngTouch which handles all my ng-clicks as tap events on a phonegap App.

However when i scroll my list, and the ios native momentum scroll kicks in, i want to be able to stop momentum scrolling with a tap as well, just like you do on a native ios app.

What happens is that another tap event is fired. So my question is:

How can i stop the momentum (native) scrolling with a tap, without firing another actual tap event...

Hope my question is clear...

completely clear. I'm having same issue where the tap is going to wrong link. I want to stop scrolling on first tap, and execute link action on second tap. Any succes with solving this? Could this post help: http://stackoverflow.com/questions/13812936/detect-if-element-has-stopped-momentum-scrolling?rq=1 — Serge van den Oever, Aug 14 '14 at 20:01

score 1 · Answer 1 · answered Oct 18 '14 at 19:37

recently I had the same problem in my angular-ionic-typeScript project. Here how I did solve it:

I created a custom directive:

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

now you can detect onScrollEvent like this:

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

where in onScroll() function will fire constantly while you are scrolling. In this function you should save a timestamp:

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

The last step is checking on each ng-click in ion-context for our lastScrollTimestamp:

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

Stop momentum scrolling ontouchstart ngTouch AngularJS

1 Answers1