CSS Scroll Snapping, vertical not working

Solution 1:

The major problem you have in your code snippet, is that the displayed scrollbar belongs to the body, where no scroll-snap properties have been defined. This is why you do not have any snapping behaviour when scrolling.

To achieve your expected result, you need to

Be sure that the displayed scrollbar belongs to the parent div
Define the overflow behaviour to the parent container to scroll

Below a working sample

As a note, consider that snapping properties (for chrome) have evolved, and that you are using deprecated features. See the css scroll snap on google developers.

Note also that this answer deals only with chrome, without the polyfill part. It is just the main scroll concept that is involved here

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

.parent {
  overflow: scroll;
  height: 100vh;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<div class="parent row">
  <section class="one"></section>
  <section class="two"></section>
  <section class="three"></section>
  <section class="four"></section>
</div>

Solution 2:

The original answer says to put overflow: hidden directly on the html and body elements which messes up a lot of things, namely headers that use position: sticky which is a pretty common concept.

The alternative is to just put the scroll-snap-type property on the body and then put the scroll-snap-align property on the elements that need to have scroll snap behavior.

body, html {
  scroll-snap-type: proximity;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y proximity;
}

section {
  height: 100vh;
}

.row section {
  scroll-snap-align: start;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<div class="row">
  <section class="one">
  </section>
  <section class="two">
  </section>
  <section class="three">
  </section>
  <section class="four">
  </section>
</div>
<section>
  <h2>This will not have sticky</h2>
</section>

CSS Scroll Snapping, vertical not working

Solution 1:

Solution 2:

Related

Recent Posts