Scroll Snapping not working

[Rosinida]

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

[clementroche]

Hi @Rosinida thank you for your feedback, can you provide a live demo (ideally on codepen or codesandbox) ?

[Rosinida]

Hi @clementroche sure, just made a very simple codepen demo for you. – hope this helps!
https://codepen.io/rosinida/pen/BargMXG
Thanks Robin

[Rosinida]

Hi @clementroche.
Is there a workaround to define a minimum scroll distance?
(as long as the scroll snapping doesn't work yet)

[clementroche]

What do you mean by minimum scroll distance ? You mean emulate CSS scroll snap ?

[Rosinida]

Yes. I would like to say: Each scroll should get the same scroll distance (for example 100vh)

[harshilsharma63]

Any update on this? I'm facing the same issue - Lenis smooth scroll and CSS snap scroll doesn't work together very well.

[clementroche]

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.

[harshilsharma63]

Thanks for the update.

[liqueflies]

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

[drewbaker]

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?

[clementroche]

Of course we're open to a PR !

[drewbaker]

Noting a possible solution to consider https://github.com/ocsal/scroll-snap

[rsm0128]

Hi @drewbaker, Here is a PR for scroll snapping. It emulates scroll snapping by using JavaScript.

[clementroche]

Hey you can try https://github.com/funkhaus/lenis-scroll-snap

[sushanyadav]

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.

[clementroche]

it should, react-lenis gives you the lenis instance as ref or using useLenis so you just need to plug it then.

[sushanyadav]

It would be greatly appreciated if somebody could include a sandbox for this. 🙏

[clementroche]

hey @Rosinida you can try lenis/snap