Set Parallax Custom Scroll Container

🚀 Feature Proposal

(A clear and concise description of what the feature is.)

This Parallax Library is very useful, when you combine it with the lerp configs, it has the potential to better than rellax.js, react-scroll-parallax, etc. All it needs is the ability to change the Scroll Container it depends on.

Motivation

Rellax.js and many others have poor performance when you compare them directly with react-spring parallax. Most mobile performance is basically unusable with the alternative libraries. If the library doesn't have bad performance, it's the lack of options and customizability. My biggest gripe is not being able to change the scroll container, or if you can, it is done ugly and intuitive.

(Please outline the motivation for the proposal.)

Lack of customizability with alternatives, already achieved with react-spring, but with the addition of a scroll container prop option would resolve that. Also, the change to optional pages props, since it would then rely on the scroll container prop.

Example

<Parallax scrollContainer={containerRef} pages={false}> //parallax content </Parallax>

(Please provide an example of how this feature would be used.)

Here's an example using react-scroll-parallax with a custom scrollContainer prop: https://codesandbox.io/s/spring-butterfly-e5006?file=/src/App.js

Thank you for your time.

[joshuaellis]

closing due to inactivity. please use discussions or discord if you want more help or please consider creating a PR if you want to add a feature 😄

[kindoflew]

@pcdependency, I'm a little confused about what kind of custom container you would like to be able to set it to. I'm also not sure what you mean by "optional pages".

Currently, the Parallax component itself has two parts: an outer container and an inner container, both of which can be styled (using style and innerStyle props respectively). In your example sandbox, the styles for your container are exactly the same as the defaults for Parallax's outer container.

Are you proposing that Parallax be able to set its container to body (which is what react-scroll-parallax does)? If that's the case, I'd be happy to look into implementing it. But it seems like what you are doing in the sandbox is already possible with the current component (though I could be misunderstanding your use case).

[joshuaellis]

Closing due to inactivity