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

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