角度可滚动的垫选择列表？答案

【问题标题】：Angular scrollable mat-selection-list?角度可滚动的垫选择列表？
【发布时间】：2019-05-27 23:56:27
【问题描述】：

我有一个问题。我没有在堆栈上找到任何熟悉的问题，所以我在这里问，是否可以使 <mat-selection-list> 可滚动（Angular 7）？当项目太多而无法容纳一个窗口时，我想在右侧显示滚动条。

<mat-card fxFlex="33%">
<mat-selection-list>
  <mat-list-item
    *ngFor="let product of products"
    [class.selected]="product === selectedproduct"
    (click)="onSelect(product)"
  >
  </mat-list-item>
</mat-selection-list>

【问题讨论】：

你能先提供示例吗？

标签： html angular angular-material angular-material2

【解决方案1】：

你可以试试：

<mat-card fxFlex="33%">
     <mat-selection-list [style.overflow]="'auto'" [style.height.px]="'300'">
         <mat-list-item
              *ngFor="let product of products"
              [class.selected]="product === selectedproduct"
              (click)="onSelect(product)"> 
     </mat-list-item>
</mat-selection-list>

【讨论】：

【解决方案2】：

通过设置自定义 CSS 属性？

仅支持 Chrome 浏览器的精美滚动条 CSS：

.custom-scroll-bar{
    height:70vh;
    overflow-y:scroll;
    overflow-x: hidden;
}

.custom-scroll-bar::-webkit-scrollbar{
    width: 5px;
}

.custom-scroll-bar::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.26);
}

对于 Firefox 和 Internet Explorer，只需使用：

.custom-scroll-bar{
    height:70vh;
    overflow-y:scroll;
}

HTML：

<mat-selection-list #shoes class="custom-scroll-bar">
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

StackBlitz Example

【讨论】：

【解决方案3】：

简单的 CSS

mat-selection-list {
  max-height: 400px;
  overflow: auto;
}

StackBlitz Demo

【讨论】：

为什么是 400px？是否可以让列表填充其父级，而不是在某个地方将其切断？
@piccy 你必须在某处设置高度，否则将没有滚动条。