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

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


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 Chrome Dev

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


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


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