Why does scroll jump to last css snapped element?

Question

I am making project in SvelteKit, but I'm fairly sure this is going to happen in vanilla all the same. Since that context and working example is important here, Here's minimal reproduction instead of code snippet: Reproduction

Description of the issue:

The viewport will jump to last snapped element when clicked on accordion item at the bottom of the page. To test:

1. Use Chromium based browser
2. mouse grab scrollbar from top and quickly move to the bottom
3. click accordion item

The viewport will jump to last snapped div.

Any ideas how to prevent that? Firefox is fine.

EDIT: Adding a video of what the issue is as I did not do a great job explaining it. Video

Answer 1

That's how css scroll-snapping behaves.

You can prevent the accordion element from being reached by the snapping effect though.

Just adding this to your .svelte file <style> block solves your snapping issue.

:global(.accordion) {
  scroll-snap-stop: always;
}