Angular适配AirConsole移动端：包含子div的容器无法滚动如何解决

• 核心前提：-webkit-overflow-scrolling: touch是WebKit内核浏览器用于实现iOS端惯性滚动效果的增强属性，不能单独开启元素滚动功能，必须配合overflow规则和容器尺寸限制才能生效。
• 修正HTML结构
  你当前的代码存在两个明显错误：
  1. 循环指令*ngFor绑定在子元素上，没有统一的父容器承载所有列表项，滚动规则无法作用于整个列表
  2. 子元素的class属性使用了逗号分隔多类名，HTML规范要求多类名必须用空格分隔
     修正后的HTML代码：

  <!-- 父容器作为滚动载体 -->
  <div class="scroll-wrapper">
    <div *ngFor="let playlist of genres" 
         [id]="playlist.category" 
         (click)="genreSelected(+playlist.category, playlist.name)" 
         class="questionElement">
      {{ playlist.name }}
    </div>
  </div>
  

• 修正CSS样式
  给滚动父容器添加尺寸限制、overflow规则，再补充惯性滚动属性：

  .scroll-wrapper {
    /* 根据布局调整最大高度，用vh单位可适配移动端屏幕高度 */
    max-height: 85vh;
    /* 开启Y轴方向滚动 */
    overflow-y: auto;
    /* 开启iOS端惯性滚动 */
    -webkit-overflow-scrolling: touch;
    /* 避免和AirConsole全局触摸事件冲突 */
    touch-action: pan-y;
  }
  

• 额外注意项
  确保滚动容器的所有上级父元素没有设置overflow: hidden属性，否则会截断内容导致滚动无法触发。

内容的提问来源于stack exchange，提问作者Patrick Langkau