Ember.js 通过余烬手势进行滑动，但也可以滚动

我已经基于余烬集合为余烬JS创建了一个“触摸列表”组件，其中混合了余烬手势：

import RecognizerMixin from 'ember-gestures/mixins/recognizers';

export default Ember.Component.extend(RecognizerMixin, {
  recognizers: 'tap press swipe',
...
  swipeLeft(event) {
...
    event.preventDefault();
    event.stopPropagation();

  },
...

My有两个面板，一个用于列表，另一个用于项目详细信息。（GitHub上已经过时了。）在640px或更宽的屏幕上，面板的容器设置为视口宽度，一切正常-可以识别水平滑动，并且不会触发滚动

在639px或更窄的屏幕上，我将容器设置为视口宽度的两倍，将每个面板设置为视口宽度。按预期水平滑动列表标题或详细信息面板滚动

问题是在触摸屏设备上的列表项上进行水平滑动。它们被识别为手势，由列表项处理，但它们也会导致水平滚动！如上所述，我调用

event.preventDefault（）和
事件.stopPropagation（）但这没有帮助

如何防止滑动导致水平滚动？
我的解决方案是更改布局，这样水平滚动就不会发生。现在，使用
transform:translateX（-100%）实现面板的水平移动

我因此进入了一个新的混乱阶段：
我怀疑css有问题，但我从未使用过余烬手势。您可以使用overflow:hidden防止水平滚动，并且您可能需要调查页面上各种元素的宽度。