时间戳

首页 > 解决方案 > 在 div 中使用鼠标滚轮和按钮进行水平滚动

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

我非常感谢任何建议，最好的方法是如何进一步进行。

标签： javascripthtmljquerycssangular

解决方案

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

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

推荐阅读