Question

我正在尝试在iOS中使用Hammer.js（jQuery版本）在水平滚动列表中禁用垂直滚动。我试过这个：

$(document).hammer().on('swipe,drag', 'body',
    function(event)
    {
        if (event.direction == Hammer.DIRECTION_UP || event.direction == Hammer.DIRECTION_DOWN) 
        {
            event.preventDefault();
        }
    }
);

但它不起作用。那么，如何在能够水平滚动的同时垂直禁用滚动？

Answer 1

我是使用event.gesture.preventDefault：

完成的

$('#horizontalCarousel').hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
        event.gesture.preventDefault();
        if(event.type == "swipe"){
            swipeAction(event);
        } else {
            dragAction(event);
        }
 });

这是给定的documentation

[编辑]

我的回答只是让你知道你使用了错误的event.preventDefault（）。实际上，您还使用了错误的语法来检查事件方向。你应该能够以这种方式管理它，虽然我还没有测试过它：

$(document).hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
            if (event.gesture.direction == Hammer.DIRECTION_UP || event.gesture.direction == Hammer.DIRECTION_DOWN){
                 event.gesture.preventDefault();
            }
     });

更改了两件事：event.gesture.direction和event.gesture.preventDefault（）; event.direction是在旧版本的锤子js上实现它的方法。

注意：如果您想对滑动事件执行某些操作，例如：在滑动时水平跳跃更大的数量，您可以合并我的答案。

Answer 2

查看此页面：

https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults#evgesturestoppropagation

试试这个，假设您的$是jQuery并且您使用的是jQuery版本的hammer.js

 $('body').hammer().on('touch', function(ev){
      var $t = $(ev.target); //let's you know the exact element you touched.
      if(ev.gesture.direction === 'left' || ev.gesture.direction ==='right'){

      } else {
           ev.gesture.preventDefault();
      }
 });

Answer 3

您可以使用drag_block_vertical选项禁用垂直滚动：

$(document).hammer({drag_block_vertical: true}).on('swipe,drag', 'body', function(event){
    // etc
});

另外，你在body元素上调用它，它应该始终存在。因此，您可以简化为：

$('body').hammer({drag_block_vertical: true}).on('swipe,drag', function(event){
    // etc
});

Answer 4

Hammer（document.body，{prevent_defaults：true}）;

如何使用Hammer.js在iOS中禁用垂直滚动？

4 个答案: