CSS `scroll-snap` not working 🤔

Programming
,
1

I cant seem to get scroll-snap working on my landing page and I have no idea why. It should be very simple, as it is here on CSS tricks.

My abbreviated HTML:

<main>
  <section />
  <section />
  <section />
</main>

Relevent CSS:

main {
  scroll-snap-type: y mandatory;
}

section {
  width: 100%;
  height: calc(100vh - var(--header-height));
  padding: 0;
  margin: 0;
  scroll-snap-align: start;
}

Full code: https://codepen.io/benmneb/pen/QWjrXLQ?editors=1100

It’s not the height calculation because when I change it to 100vh it’s all the same.

It’s not my browser because I’ve tried it in Firefox, Chrome and Safari.

It’s not a CodePen thing because CSS Tricks uses CodePen for all their examples.

Any ideas? Thanks :folded_hands:

2

I haven’t really used scroll snapping. As far as I can tell, it isn’t working because main is not your scroll container. If you move the parent container CSS scroll-snap-type to the html selector it should work. Although, I’m not sure why it is behaving so aggressively when doing so.

Another option is to hide the overflow-y on the body and then add it to main by forcing a scroll overflow. But when doing so you will have to adjust how you are doing your centering in the sections. I would suggest you use flexbox or grid for centering anyway. Not sure if you also might need to make adjustments to any height calculations.

Example of forced scroll overflow:

html, body {
  height: 100%;
}

body {
  overflow-y: hidden;
}

main {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}

Edit: I guess technically you do not need to hide the overflow on body. If you look at the second example from the article, I think you can see what I mean by having to create a scroll container. They are also using max-height: 100vh instead of propagating the height down.