Ngx-perfect-scrollbar可以用于Angular Material元素吗？

Question

我想在mat-autocomplete元素上添加完美滚动条。是否可以在angular material元素上添加ngx完美滚动条？

- Abishek Amstrong

Answer 1

我是这样添加的，但出于某些原因，在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;
    }
}

With

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

- Tim

---

嘿！我遇到了同样的问题。你找到任何解决方案了吗？或者有什么其他发现可以帮助调查吗？ - mezhik91

@mezhik91 没有，还没有。 - Tim