Mobile scroll direction detect on overflow: hidden page

Question

I want to detect scroll/touch direction on phones. For desktop, I use .on('DOMMouseScroll') and .('mousewheel') but this does not work on phones. Body of page is overflow: hidden; Anybody know how to detect this?

Answer 1

It seems I fell into the same case of yours.

Since I needed a lot of research to put all things together, I'm posting it all here:

if (Modernizr.touch) {
    // Determining swipe direction
    // http://stackoverflow.com/a/22257774/1064325
    var touchStartY;
    document.addEventListener('touchstart', function (e){
        touchStartY = e.touches[0].clientY;
    }, false);

    // Preventing iOS end of page bounce effect
    // http://stackoverflow.com/a/7771215/1064325
    document.addEventListener('touchmove', function (e){
        e.preventDefault();
    }, false);

    document.addEventListener('touchend', function (e){
        var touchEndY = e.changedTouches[0].clientY;
        if (touchStartY > touchEndY + 5) {
            // NEXT
        } else if (touchStartY < touchEndY - 5) {
            // PREV
        }
    }, false);
} else {
    // Handling wheeling properly
    // http://stackoverflow.com/a/3515490/1064325
    var deltaWheel = 0;
    var wheelTimeout = 0;
    document.addEventListener('wheel', function(event) {
        deltaWheel += event.deltaY;
        clearTimeout(wheelTimeout);
        wheelTimeout = setTimeout(function() {
            if (deltaWheel < -5) {
                // PREV
            }
            if (deltaWheel > +5) {
                // NEXT
            }
            deltaWheel = 0;
        }, 50);
    });
}