Horizontal Scroll with Mouse Wheel ReactJS

Question

I want to be able to stop scrolling vertically and scroll horizontally using the mouse wheel on my webpage. I have tried every solution I could find on the internet, and none work for me. I created a CodeSandbox to demonstrate my problem. I would greatly appreciate the help.

Answer 1

im pretty sure you didnt search good enough because if found what you are looking for on the internet, not sure i can add a link. anyway, you need to listen to the 'wheel' event, check when you are at the bottom at the page and change the event to scroll left and right instead of up and down. something like this:

 const scrollContainer = document.querySelector("main"); scrollContainer .addEventListener("wheel", (event) => { event.preventDefault(); scrollContainer.scrollLeft += event.deltaY; });