Bind MouseWheel to Horizontal Scroll

[Shivam Sinha]

Hello again,

I would be awesome to have the mousewheel bounding to the horizontal scroll as well. Is there a recommended approach when using scroll-motion?

Thanks!

[Brad Adams]

Hey @MrUltimate, horizontal scroll should be working already, since we take the page size from the body. In the storybook demo there's a "↔️ Horizontal" button at the top of the page that demonstrates this.

If you're experiencing problems please share a code sample/sandbox, and I'll check it this week 🙂

[Shivam Sinha]

Thanks @breadadams, the horizontal scroll works just fine. On mac at least, you have to hold down shift while use the mousewheel to scroll, I was wondering if there's a recommended what to bind the vertical mousewheel scroll, to the horizontal scroll.

[Brad Adams]

Ah I see, I misunderstood your question.

You don't need to perform anything special with scroller-motion for this, a simple event listener on the window scroll that updates the body's scrollLeft with the "amount of scroll" would suffice. Something like this: https://stackblitz.com/edit/scroller-motion-forced-horizontal-scroll

useEffect(() => {
  // Based on https://stackoverflow.com/a/59680347/2553600
  const onWheel = (event) => {
    if (!event.deltaY) {
      return;
    }

    document.documentElement.scrollLeft += event.deltaY + event.deltaX;
  };

  window.addEventListener('wheel', onWheel);

  return () => window.removeEventListener('wheel', onWheel);
}, []);