Menu
CSS-scroll-snap is working very well. But when you scroll on mobile with one finger, than hold this finger still on the screen and scroll with another finger in the opposite direction (like a zoom ↕), then the scroll-snap will stuck. (regardless on which browser)
It even works on Desktop when you hold Ctrl while scrolling.
I don't know if this is a common issue, but I can't find any fixes or work arounds for this problem.
Any suggestions?
Try it on yourself:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title></title>
<style media="screen">
.container{
scroll-snap-type: y mandatory;
height: 50vh;
width: 50%;
overflow-y: scroll;
}
.content {
scroll-snap-align: center;
height: 50vh;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content" style="background:blue;">
1
</div>
<div class="content" style="background:red;">
2
</div>
<div class="content" style="background:green;">
3
</div>
<div class="content" style="background:orange;">
4
</div>
</div>
</body>
</html>
342
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.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
scroll-snap-align accepts the following values: none disables scroll snapping on the element. start aligns the element's start with the scroll container's snapport when snapped into place. end aligns the element's end with the scroll container's snapport when snapped into place.
(Edit: This isn't a relevant answer, because I misunderstood the question.)
I ran your code snippet in Firefox (v72) and didn't see the behavior you're describing. Then I ran it in Chrome (v79) and I did see the problematic behavior. I'm using Windows 10. (Nice snippet, by the way.)
The best way I can describe it is that, after zooming the page, the scrolling of the element gets out of alignment with its parent container. It looks like it's done scrolling, but then it scrolls and snaps to a different element, causing it to look like it was stuck.
It seems like this is a browser-specific bug. My guess is that it's a Chrome/Blink issue.
Edit: Maybe I'm seeing something different than you. All I can do is share what I see.
Firefox:
Chrome:
154
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
