Ion-Content 用鼠标滚轮水平滚动

Question

我有一个带有水平滚动条的离子内容

<ion-content [fullscreen]="true" [scrollX]="true" (wheel)="onWheel($event)">

滚动条工作正常但鼠标滚轮不工作。我想用鼠标滚轮水平滚动

这是我的尝试：

  onWheel(event: WheelEvent): void {
    console.log(event.deltaY);

    const element: HTMLElement = event.currentTarget as HTMLElement;
    element.scrollLeft += event.deltaY;

    event.preventDefault();
 }

控制台日志显示 +100 或 -100，但滚动不成功。

Answer 1

卷轴位于 ion-content 下的元素上。这有效：

  onWheel(event: WheelEvent): void {
    const element: IonContent = event.currentTarget as unknown as IonContent;
    element.getScrollElement().then((scroll) => {
      scroll.scrollLeft += event.deltaY;
    });

    event.preventDefault();
  }

Ion-Content 用鼠标滚轮水平滚动

Ion-Content Scroll horizontally with mousewheel

scroll

mousewheel

ionic-framework