Angular cdk-virtual-scroll-viewport: scroll up is not working

Question

I have created simple virtual scroll with 5000 elements.

But when you are scrolling up via mousewheel - elements are stopping and not scrolling at all

expected behaviour: scrolling should work smoothly

any thoughts?

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

UPDATE:

I have changed css a little bit:

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

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

Now mat option is taking off half of the container and on the right side scroll is working as expected

but Why when you scrolling over mat-options it is lagging?

Answer 1

I was able to resolve it with the tricky fix:

Scroll is working fine on the parent but not on Mat-option

So, I am removing MouseEvents on mat-option via adding pointer-events: none; while the user is scrolling on parent element.

When the user ended to scroll I am removing this property.

We need to add mousewheel on parent <cdk-virtual-scroll-viewport> : to enable/disable scrolling, it is not working directly on mat-option: once you disabled this - you cant enable back

via SetTimemout I am closing scrolling in 20miliseconds

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

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