溢出时移动滚动方向检测：隐藏页面

Question

我想检测手机上的滚动/触摸方向。对于桌面，我使用.on('DOMMouseScroll') 和.('mousewheel')，但这不适用于手机。 页面正文是overflow: hidden;有人知道如何检测吗？

Answer 1

看来我也遇到了你的情况。

由于我需要进行大量研究才能将所有内容放在一起，因此我将其全部发布在这里：

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