is there a browser agnostic way of telling if an element is currently being scrolled in Angular?

Question

I have added an event listener to an input field in my app, aiming to prevent scrolling changing the number in the input, but still scroll the container the input is in (or the next element up in the DOM which is scrollable)

the event listener looks like this:

  public forceScrollBubble(event: WheelEvent) {
    let element = this.element.nativeElement;

    while (element.scrollHeight > element.clientHeight) {
      element = element.parentElement;
    }

    const newTop = element.scrollTop + event.deltaY;
    element.scrollTo({top: newTop, behavior: 'smooth'});
    return false;
  }

I've bound it to the wheel event on the input like this:

<input matInput type="number" min="0" formControlName="fixedValue" required (wheel)="forceScrollBubble($event)">

I am coming across an issue where when multiple wheel events happen in quick succession (scrolling on a trackpad), the container doesn't scroll anywhere near as much as it should, I'm guessing due to the scrolling being behavior: 'smooth' and the new scrollTo top value being calculated based off the scrollTop (which changes slowly as the scroll goes to the new scrollTop location passed to scrollTo the last time round).

So my question is, in forceScrollBubble is there a way to tell whether the previous scrollTo has finished executing so I can return false and let it finish, or even better, is there a way I can get the final scrollTop after the animation and update that so that the later scroll events aren't lost?

I have tried adding a variable to the component which stores the value of the sum of the events deltaYs, however this didn't have the desired effect and lead to scrolling seeming to "build up", i.e. it would scroll hardly at all for a moment, then scroll much faster than expected after that