Hammer.js打破垂直滚动当水平平移

问题描述：

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

我试图在水平方向增加了识别器，但它并没有真正的帮助（不知道如果我做到了，即使右）：

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

谢谢！

请提供一个工作的jsfiddle所以我们可以帮助你。 – 2014-11-10 09:53:38

答

锤2.x不支持垂直刷/平底锅。 Documentation说：

注：当调用锤（）来创建一个简单的实例，平移和刷卡识别器被配置为只检测水平手势

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

我没有看垂直锅，而是水平锅，它的工作原理。但它也禁用了正常的垂直滚动。 – 2015-03-26 14:39:40

你有没有得到任何与此，我有一个类似的问题..？ – Stradosphere 2016-03-07 05:41:06

我相信这不是真的。初始化“pan”识别器时，您只需将'direction'设置为'Hammer.DIRECTION_VERTICAL'。 – JohnP 2016-04-06 15:38:52

答

尝试将touch-action property设置为auto。

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

从hammer.js文档：

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

这应该是被接受的答案。调用preventDefault（或返回false）的要求似乎是非常标准的，以防止事件的默认行为（如果这是你想要的）。 – ChrisFox 2016-08-30 08:10:32

使它可以再次滚动，但打破了滑动手势 – 2017-02-15 20:50:15

答

用户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

Hammer.js打破垂直滚动当水平平移

相关推荐