Material 列表在移动设备中不滚动

Question

我正在使用 mat-list，但无法在移动设备上滚动它。

这是一个 mat-nav-list，里面有一些 mat-list-item，我的列表结构是这样的：

<mat-nav-list>
   <a mat-list-item matTooltip="dashboard" routerLink="/dashboard">
     <mat-icon matListIcon>dashboard</mat-icon>
   </a>
   ...
</mat-nav-list>

我可以在桌面上用鼠标正常滚动，但是当我在移动浏览器中时，我看到每个 mat-list-item 都是这样的：

element.style {
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

浏览器是否应用 CSS 本身？如果我尝试用内联样式覆盖没有任何改变，我该如何解决？

Answer 1

在我的例子中，CSS 样式来自 mat-list-item。所以我唯一能做的就是直接覆盖它。

[mat-list-item]{
  touch-action: auto !important;
}

Material 列表在移动设备中不滚动

Material list does not scroll in mobile devices

angular-material

user-experience