Сфокусированное выделение элементов списка на основе увеличения прокрутки мыши

Question

У меня есть раскрывающееся меню, в котором необходимо выделить элементы списка на основе увеличения прокрутки мыши. Когда пользователь наводит указатель мыши на список и прокручивает 1 раз вверх или вниз, элемент, расположенный непосредственно над или под ним, должен быть выделен. Это включает в себя получение дельты события mousescroll, я верю. Проблема в том, что это значение deltaY является сверхчувствительным. Поэтому, когда есть даже небольшой жест прокрутки вверх, он записывает его как нечто сумасшедшее, например 7x / 8x. Как мне подходить к обработке этой функциональности.

Это то, что у меня есть в настоящее время (но вы можете предложить что-то совершенно другое, если это будет работать лучше):

*** (также, ( event.target.id [event.target.id - 1]) это не работает. что я делаю не так?)

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

highlightListItem(event: any, scrollUp?: boolean, scrollDown?: boolean): void {
    this.highlightTimer = setTimeout(() => {
      this.someService.highlightListItem(event.target.id);
    }, 450);
    if (scrollUp) {
      this.highlightListItem = setTimeout(() => {
        this.someService.highlightListItem(event.target.id[event.target.id - 1]);
      }, 450)
    } else if (scrollDown) {
      this.highlightTimer = setTimeout(() => {
        this.someService.highlightTimer(event.target.id[event.target.id - 1]);
      }, 450);
    }


  scrollEvent(event: any): void {
    console.log(event.deltaY * 100);
    if (event.deltaY < 0) {
      this.highlightListItem(event, false, true);
    } else if (event.deltaY > 0) {
      this.highlightListItem(event, true, false);
    }
  }

HTML:

  <mat-card class="some-card" *ngFor="let property of properties; let i = index;" id="segment{{i}}"
                (mousewheel)="scrollEvent($event)">
                <mat-card-content class="some-table">
                    <div class="index">{{i + 1 }}</div>
                    <div class="someClass">
                        <div>{{property.field}}</div>
                    </div>
                </mat-card-content>
   </mat-card>