pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
28.05k stars 1.19k forks source link

[feat]: Add scrolling support to the Parallax component #2190

Open JHunnicutt opened 1 year ago

JHunnicutt commented 1 year ago

A clear and concise description of what the feature is

In regards to the Parallax component, currently there is a prop to handle scroll direction, either vertical or horizontal. When horizontal is set to true, mouse wheel functionality is disabled, and users with mice are unable to use the scroll wheel to navigate through the page.

I propose the addition of a prop scrollable that would be a compliment to horizontal where when set to true, users could use the mouse wheel to scroll through the page.

Why should this feature be included?

As it stands, if you need horizontal scrolling as well as the ability to use a mouse wheel to do it, you need to rely on external options which add code to your project, don't play well with React Spring, and perform poorly.

Please provide an example for how this would work

<Parallax
  horizontal={true}
  scrollable={true}
>
  //content
</Parallax>

// the property scrollable would engage an event listener similar to the following:
// ref.current.container.current.scrollLeft += event.deltaY + event.deltaX
// the above solution works, but is janky and doesn't compliment the spring animation implemented by <Parallax>