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

问题

I have a container:

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

And three children:

height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;

This works just as expected in Firefox, but there seems to be a threshold for snapping in Chrome. When scrolling just a small amount, Chrome will snap back to the first child, while Firefox will scroll to the next child. Only after scrolling about 30% of the child height, Chrome will snap to the next one.

This behavior can be seen in this code pen.

Is there any way to disable this hidden threshold and have Chrome scroll to the next child immediately?

回答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.

回答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

回答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

来源：https://stackoverflow.com/questions/56629124/chromes-hidden-css-scroll-snap-threshold-and-how-to-change-it

标签

css

google-chrome

scroll