Menu
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?
916
If you want smooth scrolling to HTML anchor tags without using JS then you can achive this by using scroll-snap-type , scroll behavior , and scroll-snap-align CSS propeties. So the point is that in this scenario, the scroll-behavior: smooth declaration goes on the containing div not on the html selector.
CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container's scrollport may end at after a scrolling operation has completed.
Add an “overflow-y scroll.” Then scroll-snap-type:y mandatory. Next, to the child section element, add a scroll snap align start. Done, when I do the single scroll on the mouse wheel, it snaps right into the next section.
The Scroll Snap feature allows you to stop the scroll of your page when the section reaches a defined point in the viewport. This is useful in full height sections where you wish to pause the user before they scroll to the next section similar to a slide.
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.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
