Touchend not firing after touchmove

Question

I'm trying to make a page for mobile devices that detects the scrollTop position and scrolls to the top of the page if scrollTop is lower than half the document height or scroll to bottom if its not.

I have achieved that by using this:

var ScrollTimeout;
$(window).on('scroll',function(){
    clearTimeout(ScrollTimeout);
    ScrollTimeout = setTimeout(scrollToTopOrBottom,200);
    });

The problem is that the timeout fires when the user has stopped scrolling but still has the finger on the screen.

Then I worked with the touchend event and it was great.

$(document).on('touchend',function(){
    scrollToTop();
    });

The user could stopped scrolling (with the finger still on the screen) and then continue scrolling without triggering the scrollToTopOrBottom() function.

The problem is, that event is incosistent between browsers:

In some browsers (Maxthon and Android), the touchend event worked as intended but in Opera Mobile and Chrome, the touchend event doesn't fires. The explanation for this is that touchend doesn't fires because touchcancel has been fired before.

I've tried this

$(document).on('touchmove',function(e){
    e.preventDefault();
    });

and succesfully avoided the triggering of touchcancel, but unluckily also avoided the natural behaviour of scrolling.

Does anyone know how can this be achieved? I'm completely out of ideas.

Thanks.

Answer 1

try to attach listener on both touchend and touchcancel.

$(document).on('touchend touchcancel', function() {
    doSomthing();
});

Answer 2

I wrote a shim to deal with this problem Probably a bit late for you but it might help someone. https://github.com/TNT-RoX/android-swipe-shim