Hammer.js阻塞的垂直滚动

Question

我正试图用Intel XDK (build 2727)制作一个应用程序，现在我的问题是，当我有一个超过屏幕大小的列表时，我不能垂直滚动。我把这个问题追溯到Hammer.js。此插件似乎用于侧栏。所以我试着把消息来源评论出来，看，这是可行的。但我需要侧栏，因此需要Hammer.js。经过研究发现，其他人也有同样的问题，最常见的解决方案似乎是overflow-y: scroll;，我也试过了，但没有成功。那么，我如何解决这个问题而不进入Hammer.js的源数据，而是通过在CSS表中设置异常来解决这个问题？

Answer 1

好的，我找到了一个(部分)解。在SWIP-Hammer.js中，".upage“被连接到各个方向的锤子上。把它改为DIRECTIONS_HORIZONTAL，这就解决了这个问题。主要的问题是因为锤子被连接到整个页面，而不仅仅是边栏。不知道这是不是正确的方法。

无论如何，非常感谢托马斯给我这个提示。

Answer 2

在使用Hammer事件(JS后撤)时，在DOM元素CSS中使用此样式：

touch-action: pan-y !important;

你会看到垂直滚动起作用的。

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

Answer 3

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

若要禁用角中的这些事件，可以使用以下配置：

    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 }
        };
    }