(I have tried this with and without the period (.) character)
[header]
[section class=“scroll-snap”]
[section class=“scroll-snap”]
[section = This section is more than 100vh in height]
[section = This section is more than 100vh in height]
[section class=“scroll-snap”]
[footer]
These sections without the .scroll-snap class, that are more than 100vh in height, get totally scrolled passed, rapidly, to the next .scroll-snap section (From Services to Testimonials). Surely this shouldn’t happen?
What I am expecting
Once the section with the .scoll-snap class finishes, the section should scroll as normal? So, in the example above, Projects and About should scroll freely with no “snapping”.
Please let me know if this is normal behaviour, as it seems strange to me.
The visual viewport of this scroll container may snap to a snap position if it isn’t currently scrolled. The user agent decides if it snaps or not based on scroll parameters. This is the default snap strictness if any snap axis is specified.
The main difference is must snap vs may snap, which will probably fix your problem.
I guess I have to force myself out of the snapping section?
It still works a little oddly, it still seems very buggy, as you can see in some scrolling cases, it just flies right by my none-snap sections. See here: amazon.calummaui.com
That’s why I want to use a mandatory snap, and then just release it when the “snapping” section finishes.
I guess I’m just expecting it to “snap out” of the scroll snap section allowing users to freely scroll on the sections without the class.
Have a little scroll up and down the page and see if this is the true nature of the scroll snap feature.
It works as expected for me. The only thing the setting does is add scroll-snap-type and scroll-snap-align. The browser does the rest. The fact that this may not be quite as “smart” and “fluid” as with a Javascript solution cannot be avoided, as it is just simple CSS.
