How to acces deltaY value of dynamic wheel event?

derick.007 · April 27, 2022, 9:59am

I want to have a container which scrolls in horizontal direction on mouse wheel scroll. For this purpose I need event.deltaY value, which I am not getting.

FYI - I am using page flow method to use js code method. But I cannot get event value in the value selector

Teodor · April 27, 2022, 10:58am

So isn’t the browser > scrollY > position what you need here?

derick.007 · April 27, 2022, 3:49pm

I tried that method, but I could not scroll back to its original postion. So, you can scroll horizontally to right but can’t come back to left.

Teodor · April 27, 2022, 3:57pm

Sorry not sure I understand what you mean?

derick.007 · April 27, 2022, 4:01pm

What I want to achieve is horizontal scrolling with mouse wheel rotation ? For this I need deltaY value from wheel event.

The method you mentioned works, but only to the right side scrolling. If you want scroll back to its original positon, you can’t scroll. The value is stuck there.
Please keep in mind that the wheel event is applied to a overflowing flex container. So I want scroll event inside that container only.

Teodor · April 27, 2022, 4:11pm

Maybe I just don’t get your idea. So you are saying the scroll up doesn’t return the proper Y position?

derick.007 · April 27, 2022, 4:27pm

const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});

This is a normal js code which works fine.

The below image are from my wappler project. For horizontal_scrolling

Dynamic wheel event of flex container == Using your described method.