search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

Doesn't work with features like smooth-scroll that use translate3D scrollviews #164

Closed ximudada1996 closed 2 years ago

ximudada1996 commented 2 years ago

Support

At present, it cannot be used with functions such as smooth-scroll, perhaps because the former uses translate3D to control the scrolling of the canvas, so react-parallax-scroll cannot be recognized, and functions can be added to help windows users achieve smooth scrolling to improve user experience ?

jscottsmith commented 2 years ago

@ximudada1996 is "smooth-scroll" an NPM package you're trying to use? Can you elaborate on this more? Maybe provide a demo in CodeSandbox

Not sure how to help without more information.

ximudada1996 commented 2 years ago

@jscottsmith I wrote an example using codesandbox to restore the scene with and without react-parallax-scroll, you can check the link to see the situation. Thanks~

Codesandbox：https://codesandbox.io/s/react-parallax-with-smooth-scroll-w7sm4v?file=/src/App.js

jscottsmith commented 2 years ago

I understand now, thank you for the reproduction

I don't see any way that I can support this as react-scroll-parallax relies entirely on native scrolling events and the smooth-scrollbar package implements its own scroll management with transforms like you said. They are entirely incompatible as far as I can tell.

Perhaps there's a smooth scroll solution that uses native scrolling views -- however I'm not aware of such packages.

Feel free to post any solutions for others if you find such a package.