Hammer.js 阻止了垂直滚动

Question

我正在尝试使用 Intel XDK（内部版本 2727）制作应用程序，现在我的问题是当列表超出屏幕尺寸时我无法垂直滚动。我将问题追踪到 Hammer.js。这个插件好像是用来做侧边栏的。所以我试着把来源注释掉，瞧，它正在工作。但我需要侧边栏，因此 Hammer.js。经过研究，发现其他人也遇到了同样的问题，最常见的解决方案似乎是 overflow-y: scroll; 我也试过了，但没有成功。那么，我如何在不进入 Hammer.js 的源数据的情况下解决这个问题，例如通过在 CSS 工作表上进行例外处理？

Answer 1

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

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

Answer 2

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

要禁用 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 }
        };
    }

Answer 3

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

touch-action: pan-y !important;

您会看到垂直滚动有效。

查看关于 touch-action 属性的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Hammer.js 阻止了垂直滚动

vertical scrolling blocked by Hammer.js

html

css

hammer.js

phonegap-build

intel-xdk