时间戳

首页 > 解决方案 > ngx-perfect-scrollbar 可以用于有角度的材质元素吗？

angular - ngx-perfect-scrollbar 可以用于有角度的材质元素吗？

问题描述

我想在 mat-autocomplete 元素上添加完美的滚动条。是否可以在角材料元素上添加 ngx 完美滚动条？

标签： angularangular-materialperfect-scrollbar

解决方案

这就是我添加它的方式，但由于某种原因，它在 Chrome 中有效，但在 Firefox 中却没有。如果我用 Firefox 检查元素并展开覆盖 div，那么滚动条也可以工作，但只有在我展开该节点之后。如果您找到解决方案，请告诉我。

    <mat-form-field>
       <mat-chip-list #chipList>
       <mat-chip *ngFor="let item of itemsSelected"
              [selectable]="true"
              [removable]="true"
              (removed)="remove(item)">
         {{item}}
         <mat-icon matChipRemove>cancel</mat-icon>
       </mat-chip>
       <input placeholder="{{placeholder | translate}}"
           #itemInput
           [formControl]="itemCtrl"
           [matAutocomplete]="auto"
           [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="true">
       </mat-chip-list>
       <mat-autocomplete #auto="matAutocomplete" 
                         (optionSelected)="selected($event)" 
                         (opened)="matAutocompleteOpened()"
                         class="overflow-hidden">
          <perfect-scrollbar>
              <mat-option #matOption *ngFor="let item of filteredItems | async" [value]="item">
                 {{item}}
              </mat-option>
          </perfect-scrollbar>

       </mat-autocomplete>
    </mat-form-field>

和 CSS

.mat-autocomplete-panel.overflow-hidden {
     overflow: hidden !important;
     position: relative !important;

    .ps__rail-y:hover {
         background-color: transparent !important;
    }
}

和

@Component({
  ------
  encapsulation: ViewEncapsulation.None
})

推荐阅读