jquery - 是否有 "touchmoveDelta"→ 如何修改我的鼠标滚轮触摸代码？

Question

好吧，嘿，又来了!

我正在遵循我在这里找到的教程(抱歉，现在没有链接，但它的效果太棒了!):

$(document).ready(function () {
        var divs = $('.mydiv');
        var dir = 'up'; // wheel scroll direction
        var div = 0; // current div

        var running = false;
        $(document.body).on('DOMMouseScroll mousewheel', function (e) {
            if (running) {
                return false;
            }

            running = true;
            setTimeout(function() {
                running = false;
            }, 2000);

            if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
                dir = 'down';
            } else {
                dir = 'up';
            }
            // find currently visible div :
            div = -1;
            divs.each(function(i){
                if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                    div = i;
                }
            });
            if (dir == 'up' && div > 0) {
                div--;
            }
            if (dir == 'down' && div < divs.length) {
                div++;
            }
            //console.log(div, dir, divs.length);
            $('html,body').stop().animate({
                scrollTop: divs.eq(div).offset().top
            }, 1500);



            return false;
        });
        $(window).resize(function () {
            $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

现在我正在尝试让它适用于触摸输入(iPhone 等)。我确实改变了

    $(document.body).on('DOMMouseScroll mousewheel', function (e) {

至

    $(document.body).on('touchmove', function (e) {

这就像一个魅力，但它只能向上滚动。我知道代码是这样写的:

        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }

所以我的问题是:如何修改上面的短代码来确定 touchmove 输入的向上/向下方向？据我所知，只有这一行

        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

需要更改，但我不知道如何更改。

Answer 1

不幸的是，没有方便的方法来确定触摸“平移”的增量。您需要做的是将初始触摸位置存储在 ontouchstart 上，然后在 ontouchmove 上将当前触摸位置与起始位置(特别是此中的 y 分量)进行比较实例)来计算增量并确定用户是否向上或向下拖动。

$("#myElement").on("touchstart", function(e) {
    var startingY = e.originalEvent.touches[0].pageY;

    $("#myElement").on("touchmove", function(e) {
        currentY = e.originalEvent.touches[0].pageY;
        var delta = currentY - startingY;
    });
});

在上面的示例中，delta 是平移的距离，每次触发 touchmove 时都会更新。另外，不要忘记在 touchend 上取消绑定(bind) touchmove。