在div中使用鼠标滚轮和按钮进行水平滚动

感谢您关注并阅读我的问题。

我是Angular和Typescript语言的新手。 目前，我可以使用按钮控件来滚动分区，并且我也希望使用鼠标滚轮来滚动分区。

我尝试了一些代码，例如：

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

这是我的打字稿代码：

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

对于任何建议，最好的方法是如何进一步进行，我将不胜感激。