Ion-Content Scroll horizontally with mousewheel

Issue

I have a ion content with an horizontal scrollbar

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

The scrollbar works well but the mouse wheel does not. I would like to use mouse wheel to scroll horizontally

Here is my try :

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

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

    event.preventDefault();
 }

The console log show +100 or -100, but the scroll does not make it.

Solution

The scroll is on a element under the ion-content. This works :

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

    event.preventDefault();
  }

Answered By - Foxhunt