Scroll Snapping with ScrollSmoother

[marco_sohn]

Hi everyone,

 

I'm trying to use scroll snapping with ScrollSmoother.
As soon as I set the snap property ScrollSmoother seems to get stuck.

How can I get snapping to work with ScrollSmoother?

 

Kind regards,
Marco
 

See the Pen MWLGWpv by mschuler (@mschuler) on CodePen

[mvaneijgen]

Seems like the bootstrap version you're adding (5.0.2) is adding something that screws up the logic. 

 

See the Pen abXGOQL by mvaneijgen (@mvaneijgen) on CodePen

 

Yep, it is scroll-behavior:smooth that Bootstrap adds to the HTML element 

 

If you set it to auto on your CSS it fixes the issue. Hope it helps and happy tweening! 

 

Side note, you also want to subtract one section from your snap logic, because it starts already at the first one, so you don't want to count that one. 

 

See the Pen JjxvYjv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[marco_sohn]

1 hour ago, mvaneijgen said:

Yep, it is scroll-behavior:smooth that Bootstrap adds to the HTML element 

If you set it to auto on your CSS it fixes the issue. Hope it helps and happy tweening! 

This did the trick for me!

Thanks for your help.💚