Горизонтальная прокрутка колесом мыши и кнопкой в ​​div

Question

Спасибо, что обратили внимание и прочитали мой вопрос.

Я новичок в Angular и языке машинописного текста. В настоящее время я могу прокручивать разделение с помощью кнопки управления, и я использую sh, чтобы прокручивать разделение с помощью колеса мыши.

Я попробовал какой-то код, например:

<div ... (wheel)="onWheel($event)" ... ><div>

onWheel(event: WheelEvent): void {
   (<Element>event.target).parentElement.scrollLeft += event.deltaY;
   event.preventDefault();
} 

Но похоже, что это не работает в моем проекте.

А вот мой HTML код:

<button mat-button class="prevBut" (click)="scrollLeft()"><mat-icon>keyboard_arrow_left</mat-icon </button>

<div #widgetsContent class="widgetDiv" (wheel)="onWheel($event)">
</div>

<button mat-button class="prevBut" (click)="scrollRight()"><mat-icon>keyboard_arrow_right</mat-icon></button>

Вот мой код на Typescript:

 public scrollRight(): void {
        this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft += 150), behavior: 'smooth' });  
 }

 public scrollLeft(): void {
        this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft -= 150), behavior: 'smooth' });
 }

 onWheel(event: WheelEvent): void {
       (event.target as Element).parentElement.scrollLeft += event.deltaY;
       event.preventDefault();
 }

I был бы очень признателен за любое предложение, как лучше всего двигаться дальше.

Answer 1

Спасибо всем, кто обратил внимание на мои проблемы. К счастью, я решил это сам. Вот ответ, как я его решаю.

onWheel(event: WheelEvent): void {
       this.widgetsContent.nativeElement.scrollLeft += event.deltaY;
       event.preventDefault();
 }