Hammer.js 阻止垂直滚动答案

【问题标题】：vertical scrolling blocked by Hammer.jsHammer.js 阻止垂直滚动
【发布时间】：2015-11-23 12:54:12
【问题描述】：

我正在尝试使用 Intel XDK（内部版本 2727）制作应用程序，现在我的问题是当我的列表超出屏幕大小时，我无法垂直滚动。我将问题追溯到 Hammer.js。这个插件好像是用来做侧边栏的。所以我试图评论源代码，瞧，它正在工作。但我需要侧边栏，因此需要 Hammer.js。经过研究发现其他人也有同样的问题，最常见的解决方案似乎是overflow-y: scroll; 我也尝试过，但没有运气。那么，我怎样才能在不进入 Hammer.js 的源数据的情况下解决这个问题，例如通过在 CSS 表中进行异常处理？

【问题讨论】：

尝试禁用锤子垂直平移和滑动监听器。
它们放在哪里？有多个文件。锤子.js , 边栏.js , swipe.js , swipe-hammer.js , jquery.hammer.js 等等。
我不知道Intel XDK。。侧边栏或主要内容似乎有一个锤子实例，用于注册平移或滑动。通过将监听器设置为仅监听水平来更新实例。我猜你需要在英特尔 SDK 中搜索创建实例的部分。

标签： html css phonegap-build intel-xdk hammer.js

【解决方案1】：

在使用 Hammer 事件 (JS fallback) 的 DOM 元素 CSS 中使用此样式：

touch-action: pan-y !important;

您会看到垂直滚动有效。

请参阅有关touch-action 属性的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

【讨论】：

【解决方案2】：

我们需要禁用hammerjs的捏合、旋转和平移事件，或者需要使用hammerjs处理垂直滚动。 hammejs 将touch-action: none; css 添加到您应用hammerjs 事件的元素中。

要在 Angular 中禁用这些事件，您可以使用以下配置：

    export class MyHammerConfig extends HammerGestureConfig {
        overrides = <any>{
            // override hammerjs default configuration
            'swipe': { direction: Hammer.DIRECTION_HORIZONTAL },
            'pinch': { enable: false },
            'rotate': { enable: false },
            'pan': { enable: false }
        };
    }

【讨论】：

【解决方案3】：

好的，我找到了（部分）解决方案。在 swipe-hammer.js 中，“.upage”连接到各个方向的锤子。将其更改为DIRECTIONS_HORIZONTAL，现在就解决了这个问题。主要问题是因为 Hammer 连接到整个页面，而不仅仅是侧边栏。不知道这是否是正确的做法。

无论如何，非常感谢@Thomas 给我的提示。

【讨论】：

很高兴你找到它 :) 我希望这不会破坏其他东西。