2

I'm making a website and wanted to use scroll-snap-type. The problem is that it always skips one element on mobile view. That happens only in Chrome, in Firefox it works fine. Any idea how to make it work in Chrome?

body {
  margin: 0;
}

.container {
  max-height: 100vh;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.item {
  height: 100vh;
  border-bottom: 5px solid white;
  scroll-snap-align: center;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-stop: always;
}
<div class="container">
  <div class="item">
    A
  </div>
  <div class="item">
    B
  </div>
  <div class="item">
    C
  </div>
  <div class="item">
    D
  </div>

</div>
Green
  • 486
  • 2
  • 11
  • 31
Milosz_p
  • 31
  • 3
  • Works fine for me. Chrome 89.0.4389.105 on Android – Mr T Apr 16 '21 at 15:18
  • Can you be more specific on what you mean by 'mobile view'? I'm running this on the same version of Chrome on Android as the user above and the scroll-snap isn't working *at all*. Scroll-snap has unfortunately been pretty broken on Chrome since its release. There is a bug on desktop versions which causes overscrolling with a scrollwheel, which I've [mentioned before here](https://stackoverflow.com/questions/64743301/scroll-snap-full-screen-always-scrolls-2-sections/64744087#64744087). It does not affect this snippet however since you are using a valid container to hold the scroll. – lawrence-witt Apr 17 '21 at 23:10

0 Answers0