scroll - Hammer.js 在水平平移时打破垂直滚动

Question

我正在使用 Hammer.js 来寻找水平平移手势，我设计了一个简单的函数来在向左或向右平移时单击按钮。它工作正常，除了垂直滚动在触摸设备上没有任何作用，或者它真的有故障和奇怪。

函数如下:

var panelSliderPan = function() {
    // Pan options
    myOptions = {
        // possible option
    };

    var myElement = document.querySelector('.scroll__inner'),
        mc = new Hammer.Manager(myElement);
    mc.add(new Hammer.Pan(myOptions));

    // Pan control
    var panIt = function(e) {
        // I'm checking the direction here, my common sense says it shouldn't
        // affect the vertical gestures, but it blocks them somehow
        // 2 means it's left pan
        if (e.direction === 2) {
            $('.controls__btn--next').click();
        // 4 == right
        } else if (e.direction === 4) {
            $('.controls__btn--prev').click();
        }
    };

    // Call it
    mc.on("panstart", function(e) {
        panIt(e);
    });
};

我尝试向识别器添加水平方向，但它并没有真正帮助(不确定我是否做得对):

mc = new Hammer.Manager(myElement, {
    recognizers: [
        [Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
    ]
});

谢谢!

Answer 1

尝试设置 touch-action property 自动。

mc = new Hammer.Manager(myElement, {
    touchAction: 'auto',
    recognizers: [
        [Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
    ]
});

来自hammer.js 文档:

When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.