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

【问题标题】：Horizontal scrolling with mouse wheel and button in a div在 div 中使用鼠标滚轮和按钮进行水平滚动
【发布时间】：2020-05-11 18:02:38
【问题描述】：

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

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

我非常感谢任何建议，关于如何进一步进行的最佳方式。

【问题讨论】：

你为什么不使用 css max-width 和 overflow-x: scroll 来实现你想要的？
这是我的 CSS 代码。 ``` .widgetDiv{ 显示：弹性；溢出：自动；溢出-x：隐藏；宽度：-moz-available；宽度：-webkit-fill-available； } ```

标签： javascript html jquery css angular

【解决方案1】：

感谢任何关注我问题的人。幸运的是，我自己解决了这个问题。这就是我如何解决它的答案。

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

【讨论】：