Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JHunnicutt opened this issue Aug 30, 2023 · 0 comments
Open

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

JHunnicutt opened this issue Aug 30, 2023 · 0 comments
Labels
template: request is a request someone has submitted

Comments

@JHunnicutt
Copy link

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>
@JHunnicutt JHunnicutt added the template: request is a request someone has submitted label Aug 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
template: request is a request someone has submitted
Projects
None yet
Development

No branches or pull requests

1 participant