[feat]: Parallax page should be able to be sized by pixels or a constant and not just viewHeight.

[SurvivrrHayde]

A clear and concise description of what the feature is

Looking at the ParallaxLayer component and specifically the factor prop. I feel a user should instead of just being able to use a multiple of the user's window height to size a page, there should be an option to have a page set to a constant.

Why should this feature be included?

I have a multi page website, but my second page has text information on it, that should not look different on any device. However, my other pages are all set to 100% window height.

Please provide an example for how this would work

No response

[SurvivrrHayde]

A temporary solution I had thought of was to take the pixels I needed for a page and divide it by the window.innerHeight, to get the factor I need, but I noticed that when a parallaxLayer is rerendered with a different factor, it does not update correctly.

[joshuaellis]

Thanks for the feature request, it's a bit unclear what you're asking for and in what component/hook you're expecting this – would you be able to revise your post and update it? :)

[SurvivrrHayde]

Sorry, I should have been more clear. I am referring to the ParallaxLayer component and specifically the factor prop within this component.

[hendrikras]

Without using a parallax. Content can overflow the height of a page, the amount of overflow can be relative to the device size. Browsers will display a scrollbar when this happens. Allowing you to scroll down to the content that was not on the initial rendering of the page.

Now if we wanted the same behaviour with a Parallax you would need to know how much content was overflowing the first page and translate that to a value that reflects the "pages" prop.

Lets say we have content that has 1500px height on a screen that can display 1000px in total height. In order for the Parallax to be able to scroll to the bottom of that content. And then stop scrolling. You would need to give the "pages" prop a value of 1.5. But if we now change the device to one that has a screen of 500px height, assuming this device has the same width as the first, the value or the "pages" prop needs to be 3. And this calculation needs done for each device or resize event.

It would be nice if the Paralax component would just know when to stop scrolling based on the amount of content it has as a child.