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属性设置为auto.

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

来自hammer.js文档:

当你将touchAction设置为auto时,它不会阻止任何默认值,而Hammer可能会破坏.您必须手动调用preventDefault才能解决此问题.如果你知道自己在做什么,那么你应该只使用它.