Hammer.js 阻止了垂直滚动

Question

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

Answer 1

在使用 Hammer 事件（JS 回退）的 DOM 元素 CSS 中使用此样式：

touch-action: pan-y !important;

您将看到垂直滚动有效。

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

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

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

不管怎样，非常感谢@Thomas 给我提示。