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到auto。

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

从hammer.js文档：

当您将touchAction设置为自动它不阻止任何违约，并可能锤将打破。你必须手动调用了preventDefault来解决这个问题。您应该只使用这个，如果你知道自己在做什么。

Answer 2

用户patforna是正确的。您需要调整touch-action财产。这将解决滚动当你在移动势必大元素锤不工作。

您创建一个实例锤像这样

var h = new Hammer(options.contentEl, {
    touchAction : 'auto'
});

我正在拉刷新功能，因此我需要pan事件。

添加识别器。

h.get( 'pan' ).set({
    direction   : Hammer.DIRECTION_VERTICAL,
});

h.on('panstart pandown panup panend', eventHandler);

该事件处理程序里面，你看那个被触发，并在event.preventDefault()当你需要它手动调用事件。这适用于锤2.0.6。

对于任何人谁是寻找拉刷新代码从被带到 - https://github.com/apeatling/web-pull-to-refresh

Answer 3

我的问题是，垂直滚动切换被认为是应该显示在水平平移/滑动/隐藏侧边栏。查看事件的细节后，我意识到，锤可能触发panleft和panright事件基于X三角洲和不考虑Ÿ三角洲，所以我快速的解决方案是我的处理程序，检查摇摄方向：

this.$data.$hammer.on('panleft', (e) => {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        return;
    }

    this.isVisible = true;
});

Answer 4

锤2 x不支持垂直的掠过/锅。 Documentation说：

注意：当调用锤（）来创建一个简单的实例，平移和滑动识别器被配置成仅检测水平姿势

但是，您可以使用older 1.1.x version，其支持垂直姿势

——

澄清：这是指“简单实例”这是当你没有任何识别器配置作为第二个参数传递。换句话说，这些是缺省值，但可以（并且通常应）被重写。