CSS Scrolling - snap into place?

Question

I'm trying to implement vertical snap-into-place scrolling using CSS for a site, but having trouble getting it to work. To isolate the problem, I created this toy example:

#container {
  scroll-snap-type: y mandatory;
}

.tile {
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start;
}

<div id="container">
  <div class="tile" style="background-color:red;">
  </div>
  <div class="tile" style="background-color:blue;">
  </div>
  <div class="tile" style="background-color:green;">
  </div>
  <div class="tile" style="background-color:yellow;">
  </div>
</div>

However everything still scrolls freely. Where am I going wrong? Thanks!

dale landry · Accepted Answer · 2023-08-10T21:57:27.210

On all examples at MDN I have seen using scroll snapping the parent element always has a defined height and an overflow for the direction you are using, in your case y => overflow-y: scroll;. Without the defined height, in my testing the snapping will not work.

Now, since the body has the default scrolling the height must be defined in the css for body.

html,
body {
  height: 100vh;
  overflow: hidden;
}

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

#container div {
  height: 100vh;
  scroll-snap-align: start;
}

<div id="container" style="">
  <div class="tile" style="background-color:red;">
  </div>
  <div class="tile" style="background-color:blue;">
  </div>
  <div class="tile" style="background-color:green;">
  </div>
  <div class="tile" style="background-color:yellow;">
  </div>
</div>

@dale_landry Why the redundant `scroll-snap-type` CSS property in your code? — Penny Liu, Aug 10 '23 at 15:53
@PennyLiu thanks for the heads up, was an oversight, likely I forgot to remove the one without the Y Axis when I was coding. — dale landry, Aug 10 '23 at 21:57

CSS Scrolling - snap into place?

1 Answers1