代码之家  ›  专栏  ›  技术社区  ›  michasaucer

角度可滚动垫选择列表?

  •  0
  • michasaucer  · 技术社区  · 7 年前

    我有个问题。我在堆栈上找不到任何熟悉的问题,所以我在这里问,是否可以 <mat-selection-list> 可滚动(角度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>
    

    3 回复  |  直到 6 年前
        1
  •  13
  •   Oen44    7 年前

    简单CSS

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

    StackBlitz Demo

        2
  •  5
  •   Prashant Pimpale Dila Gurung    7 年前

    仅支持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
  •  3
  •   jaaso    7 年前

    您可以尝试以下方法:

    <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>