HammerJS 滑动不适用于具有溢出 css 属性的元素答案

【问题标题】：HammerJS swipe not working on elements with overflow css propertyHammerJS 滑动不适用于具有溢出 css 属性的元素
【发布时间】：2020-02-12 23:02:20
【问题描述】：

EDIT：sn-p 在嵌入问题时工作正常，但在编辑时不能；这让我意识到它与可以滚动的底层容器有关......我在手机上对此进行了测试，锤子在没有overflow 属性的小区域上工作正常。
我更新了 sn-p 以反映这一点。

问题是：如何让它在需要垂直滚动的容器上工作？

我正在 Angular PWA 中构建滑动导航。我让它在 Chrome 桌面上运行，但它在我的手机上不起作用。当我在 Chrome devtools 中尝试触摸模拟器时，它会根据方向/设备变得疯狂，几乎没有检测到任何东西。 panleft 和 panright 工作得稍微好一点，但由于某种原因完全破坏了锤子（可能是因为我没有去抖动它，它只是在短时间内停止检测而没有任何错误）。

我做错了什么？

下面的 sn-p 与 Chrome devtools 中的设备模拟器一起使用时表现相似

const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
  console.log(event.type);
});

body,
html {
  height: 100%;
}

.content {
  margin-top: 20%;
  width: 100%;
  height: 80%;
  background: orange;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Can touch this
<div class="content">Can't touch this (on mobile / emulator)</div>

实际代码

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private gameService: GameService,
    private routerService: RouterService
  ) {}

  ngOnInit() {
    this.gameService.gameInit();

    const hammer = new Hammer(document.documentElement);
    hammer.on('swipeleft swiperight', event => {
      if (event.type === 'swiperight') {
        this.routerService.navNext();
      } else if (event.type === 'swipeleft') {
        this.routerService.navPrev();
      }
    });
  }
}

【问题讨论】：

标签： angular progressive-web-apps hammer.js

【解决方案1】：

在css中添加一行。

.content {
  margin-top: 20%;
  width: 100%;
  height: 80%;
  background: orange;
  overflow-y: auto;
  touch-action: pan-y !important; /*add this line */
}

希望它有效。

【讨论】：

【解决方案2】：

正确的答案是将 touch-action: pan-y !important 粘贴到你的类中并带有溢出属性

【讨论】：