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;}