Angular cdk-virtual-scroll-viewport：向上滾動不起作用

Question

我創建了包含 5000 個元素的簡單虛擬滾動。

但是當您通過鼠標滾輪向上滾動時 - 元素停止並且根本不滾動

預期行為：滾動應該可以順利進行

有什么想法嗎？

演示： https ://stackblitz.com/edit/angular-h4xptu-r24hpq?file=app%2Fselect-reset-example.ts,app%2Fselect-reset-example.html

<mat-form-field>
  <mat-select
    [formControl]="form"
    placeholder="State"
    class="virtual-scroll"
    (openedChange)="scrollViewport.scrollToIndex(states.indexOf(form?.value || 0))"
  >
    <cdk-virtual-scroll-viewport
      [itemSize]="48"
      [style.height.px]="6*48"
      minBufferPx="288"
      maxBufferPx="288"
      #scrollViewport
    >
      <mat-option *cdkVirtualFor="let state of states" [value]="state">
        {{state}}
      </mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-select>
</mat-form-field>

更新：

我對 css 做了一點改動：

.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
  min-width: unset !important;
}

mat-option {
  width: 100px !important;
  background-color: red;
}

現在 mat 選項正在取出容器的一半，右側滾動按預期工作

但是為什么當你滾動 mat-options 時它會滯后？

Answer 1

我能夠通過棘手的修復來解決它：

滾動在父級上運行良好，但在 Mat-option 上卻不行

因此，我通過添加pointer-events: none; 當用戶在父元素上滾動時。

當用戶結束滾動時，我將刪除此屬性。

我們需要在父<cdk-virtual-scroll-viewport>上添加mousewheel ：啟用/禁用滾動，它不能直接在 mat-option 上工作：一旦你禁用它 - 你不能啟用回來

通過SetTimemout我將在 20 毫秒內關閉滾動

    <cdk-virtual-scroll-viewport
      itemSize="48"
      appendOnly
      [style.height.px]="6*48"
      #scrollViewport
      (mousewheel)="mouseWheelEvent($event)" // <=== scroll event
    >
      <mat-option
        [class.disable-events]="addClass$ | async" // <==== class will be added in case scrolling, and removed if scrolling ended
        *cdkVirtualFor="let state of states"
        [value]="state"
      >
        {{state}}
      </mat-option>
    </cdk-virtual-scroll-viewport>

  mouseWheelEvent(e) {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => this.addClass$.next(false), 20);
    this.addClass$.next(true);
  }

.disable-events {
  pointer-events: none;
}

演示： https ://stackblitz.com/edit/angular-h4xptu-7oy9es?file=app/select-reset-example.ts