[feat]: Add scrolling support to the Parallax component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the Parallax component and reading how its existing horizontal mode handles scrolling. Implement the proposed scrollable behavior for mouse-wheel input without disrupting the spring animation, then verify that horizontal Parallax instances can navigate with the wheel.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100