lenis
lenis copied to clipboard
darkroomengineering
Scroll Snapping not working
Hi, i tried to add scroll-snapping to my HTML and it worked!
But sadly there is an issue while using scroll-snap-align: start;
It always jumps without animation to my next section.
https://css-tricks.com/practical-css-scroll-snapping/#aa-example-3-vertical-full-screen
Can you fix that?
(Love your code!) Thanks Robin
Hi @Rosinida thank you for your feedback, can you provide a live demo (ideally on codepen or codesandbox) ?
Hi @clementroche sure, just made a very simple codepen demo for you. – hope this helps! https://codepen.io/rosinida/pen/BargMXG Thanks Robin
Hi @clementroche. Is there a workaround to define a minimum scroll distance? (as long as the scroll snapping doesn't work yet)
What do you mean by minimum scroll distance ? You mean emulate CSS scroll snap ?
Yes. I would like to say: Each scroll should get the same scroll distance (for example 100vh)
Any update on this? I'm facing the same issue - Lenis smooth scroll and CSS snap scroll doesn't work together very well.
It seems like the solution would be to emulate scroll snapping using JavaScript and that's something we want to avoid. So for the moment i would advice you to not use Lenis if you need CSS snap scroll.
Investigating: setting the wrapper and the content it will scroll but not interpolating with css easing of the snap. I think this could be a neverending issue.
EDIT: Solving this to me is like solving and improving accessibility of those king of scroll hijacking where you have to wait before triggering another scroll. what a dream :D
It seems like the solution would be to emulate scroll snapping using JavaScript and that's something we want to avoid. So for the moment i would advice you to not use Lenis if you need CSS snap scroll.
So stoked to see this library... Really like the approach. Scroll Snap is certainly something we need a lot. Would you be open to a PR trying to implement this? Or is this just a "hard no" that you don't want us to even try?
Noting a possible solution to consider https://github.com/ocsal/scroll-snap
Hey you can try https://github.com/funkhaus/lenis-scroll-snap
Is this available for react wrapper. if so how do we use it? Thank you so much.
it should, react-lenis gives you the lenis instance as ref or using useLenis so you just need to plug it then.
It would be greatly appreciated if somebody could include a sandbox for this. 🙏