Chrome's hidden CSS scroll-snap threshold and how to change it

Question

I have a container:

scroll-snap-points-y: repeat(100%);
snap-type: mandatory;
snap-type: y mandatory;

And three children:

heigh         


        

Answer 1

Based on the Chromium Bugs discussion around scroll-snap in general, it appears that the intent is to determine momentum (difficult with a scroll, slightly easier with a swipe) but the implementation is a bit wonky.

The suggestion is to utilize scroll-snap-stop: always to override that momentum intent (which you've done). However, it also mentions that scroll-margin and scroll-padding may impact the movement from one snap point to the next.

CSS Snap Scrolling from Google

You might also want to look at the Overscroll-behavior API in conjunction with snap-scroll.

Answer 2

The threshold you describe seems to be closer to 50% with 75.0.3770.100 on (desktop) Linux.

I found that the old element would snap back if I scrolled the midpoint between two elements to just before the exact middle of the viewport, while the new element would scroll into view if I moved the midpoint to just after the exact middle of the viewport. Hence, it seems the threshold is 50%.

This behavior may be significantly related to the following:

https://cs.chromium.org/chromium/src/cc/input/scroll_snap_data.cc?q=scroll-snap+&dr=C&l=152-155:

// If snapping in one axis pushes off-screen the other snap area, this snap
// position is invalid. https://drafts.csswg.org/css-scroll-snap-1/#snap-scope
// In this case, we choose the axis whose snap area is closer, and find a
// mutual visible snap area on the other axis.

I'm not sure.

I found the above searching for snap-scroll; most of the results for this query consist of HTML files and test mocks.

The other two relevant-looking results I found were

• https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/page/scrolling/snap_coordinator.cc?q=scroll-snap&dr=C&l=31

• https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/paint_layer_scrollable_area.cc?q=scroll-snap&l=813&dr=C

Answer 3

You can temporarily remove scroll-snap-align on :hover to make it go the next/previous, I guess:

#carousel.snap > div:hover {
  scroll-snap-align:initial;
}

https://codepen.io/anon/pen/BXwYPa