Question

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

Answer 1

这是我添加的方式，但是由于某种原因，它可以在Chrome中使用，但在Firefox中却不能。如果我使用Firefox检查元素并扩展overlay 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
})

ngx-perfect-scrollbar可以用于角形材料元素吗？

1 个答案: