Scroll 水平平移时，Hammer.js会中断垂直滚动

我使用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);
    });
};

我曾尝试向识别器添加水平方向，但没有真正起到作用（不确定是否正确）：

---

谢谢

Hammer 2.x不支持垂直滑动/平移。说：

注: 调用Hammer（）创建简单实例时，平移和滑动识别器配置为仅检测水平手势

但是，您可以使用，它支持垂直手势

--

澄清：这是指一个“简单实例”，当您没有将任何识别器配置作为第二个参数传递时。换句话说，这些是默认值，但可以（通常应该）被覆盖

尝试将设置为

auto

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

从hammer.js文档：

当您将touchAction设置为“自动”时，它不会阻止任何默认设置，锤子可能会断裂。您必须手动调用preventDefault来修复此问题。只有当你知道自己在做什么的时候，你才应该使用这个

---

用户patforna是正确的。您需要调整

触摸操作

属性。这将修复当你在手机中的一个大元素上绑定了锤子时滚动不起作用的问题

您可以像这样创建一个Hammer实例

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

我正在开发一个pull-to-refresh功能，所以我需要

pan

事件

添加识别器

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

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

在eventhandler中，您可以查看触发的事件，并在需要时手动调用

event.preventDefault（）

。这适用于液压锤2.0.6

---

对于任何正在查看拉刷新代码的人来说，我的问题是垂直滚动切换了一个边栏，该边栏应该在水平平移/滑动时显示/隐藏。在查看事件细节之后，我意识到锤子可能会触发基于Xδ的PANTLUT和PANLALT事件，而不考虑Yδ，所以我的快速解决方案是检查我的处理程序中的PAN方向：

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

    this.isVisible = true;
});

---

请提供一个工作的JSFIDLE以便我们可以帮助您。我不是在看垂直平移，而是看水平平移，它可以工作。但它也会禁用正常的垂直滚动。你有没有这样做过，我也遇到了类似的问题？我相信这不是真的。你只需要将

方向设置为
Hammer。在初始化
pan
识别器时，方向是垂直的。比如@stradosphere Hammer 2支持垂直平移，只要在构造函数中使用DIRECTION_VERTICAL常量。@Juan-我在任何地方都没有使用构造函数，只是使用hmTouchEvents模块、hm swiperight和hm swipeleft指令绑定滑动事件的angular指令。这应该是可以接受的答案。调用preventDefault（或返回false）的要求似乎非常标准，可以防止事件的默认行为（如果这是您想要的）。这使它可以再次滚动，但打破了滑动手势。hammerjs文档中的许多内容几乎都是有意义的：-/您知道它们的真正含义吗。我有一种直觉的感觉，我理解这个评论，但我也真的不理解！
this.$data.$hammer.on('panleft', (e) => {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        return;
    }

    this.isVisible = true;
});