Angular Material 触摸屏滚动问题

Question

我的 Angular Material 应用程序中有几个地方似乎无法在移动触摸屏设备上滚动。垫按钮似乎是问题，但并非在所有情况下。

• 例如，我有一个响应式按钮组件，它不会在移动设备上水平滚动。滚动条显示，但按钮不允许触摸滚动。
• 这在我的垫子桌上也是一样的。我有一列用于使用 mat-icon-buttons 的 CRUD 操作。这是表格中唯一不允许用户触摸时滚动的部分。
• 折叠时，我的主要 SideNav 也不会垂直滚动。我将其折叠为带有 mat-icons 的 mat-list-items 列表。

这很奇怪，因为每当我创建一个新项目或 stackblitz 来重新创建这种效果时，它都不会发生。

这是我的响应式按钮组件的简化版本，具有相同的 html 和 css 结构：Blitz。如果您使用浏览器的内置响应式查看器，它应该可以很好地滚动。

我什至将闪电战中的确切代码复制到我的应用程序中，但它无法正常工作。无论我把它放在哪里/我改变了什么，它都拒绝滚动。

如果我从应用程序中的按钮中删除 mat-*******-button，一切都会按预期进行。这似乎是某些指令的问题？

Answer 1

对于遇到此问题的其他人，请在此处跟踪：问题

经过大量的试验和错误，我发现 mat-tooltips 是造成这种行为的罪魁祸首。显然，自 2017 年中期以来，这一直是一个严重的问题。删除它们可以解决问题，但这并不是真正的正确解决方法。GitHub 上的问题中发布了一个解决方法，我将尝试一下。

编辑：

我无法让解决方案发挥作用。如果找到替代方案，请对此答案或 GitHub 线程发表评论。

Answer 2

这适用于任何材质版本......在您的styles.css

.mat-tooltip-trigger {
  touch-action: auto !important;
}