9

After you scrolled in a container which has some sort of CSS scroll-snapping active, how long is the delay since user-scrolling ended that the browser starts scrolling to the snapping position?

Motivation

I wrote an answer to question CSS Scroll Snap with Animation Effect where I simulate a scrollend event by debouncing the scroll event callback by 250 ms. This seems to be close enough to the real value in Chrome browser. But it would be nice to get some first-class values. There might even be an API somewhere so that I can get the correct value by JS.

yunzen
  • 32,854
  • 11
  • 73
  • 106
  • I ran into the same problem and have created something that seems to work: https://stackoverflow.com/questions/65952068/determine-if-a-snap-scroll-elements-snap-scrolling-event-is-complete/66029649#66029649 – Klaas Leussink Feb 03 '21 at 14:52

1 Answers1

9

CSS Scroll Snap Module Level 1:

The CSS Scroll Snap Module intentionally does not specify nor mandate any precise animations or physics used to enforce snap positions; this is left up to the user agent.

I strongly assume that most browsers that support scroll snapping (e.g. Firefox) use the same functionality that they already use for scroll-behavior: smooth;.

CSSWG - Smooth Scrolling:

The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

This means that there might be differences not only between browsers, their specific versions, but also depending on the operating system they are running on. Also note that browsers might or might not change animations based on the user settings (e.g. because of accessibility concerns).

I do not think that there is an API to get the exact delays and/or smoothing functions.

str
  • 42,689
  • 17
  • 109
  • 127
  • 1
    Great answer, there really should be a `scroll-snap-delay` to gently guide users instead of forcing their scroll experience away from the mouse/keyboard. – Ben Racicot Nov 18 '22 at 18:15