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

【问题标题】：How do I disable vertical scrolling in iOS using Hammer.js?如何使用 Hammer.js 在 iOS 中禁用垂直滚动？
【发布时间】：2013-03-10 14:04:43
【问题描述】：

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

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

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

【问题讨论】：

你试过更新的答案吗？

标签： javascript jquery safari multi-touch hammer.js

【解决方案1】：

Hammer(document.body, { prevent_defaults: true });

【讨论】：

这不是禁用所有事件吗？（甚至点击事件）。另外，如果只禁用垂直滚动呢？

【解决方案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();
      }
 });

【讨论】：

这个问题是，垂直滚动有时会从侧面开始……浏览器有时会在它认为你正在滚动之后永远接管。
我不得不说，当您开始垂直滚动方向时，滚动被锁定为仅垂直滚动是很常见的。在我看来，它提高了可用性。
感谢您的回答。不幸的是，这不能在我的测试中禁用垂直滚动。

【解决方案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
});

【讨论】：

您好，感谢您的回答，但这似乎无法在我的测试中禁用垂直滚动。我尝试在里面添加 event.preventDefault() ，但仍然没有帮助。

【解决方案4】：

我使用 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 是在旧版本的hammer js 上执行此操作的方式。

注意：如果你想对滑动事件做一些事情，例如：滑动时水平跳跃更大的量，你可以结合我的答案。

【讨论】：

你好巴特。感谢您的回答。我终于开始尝试这个，但这只是完全禁用了滚动，我已经设法做到了（当屏幕外没有项目时我需要它）。我只需要垂直禁用滚动。
为什么不确保 div 不能使用 css 滚动？（溢出-y：隐藏；）。您仍然可以通过使用 event.gesture.deltaY 来使 div 可滚动以了解手势的移动。