CSS Scroll Snapping, vertical not working

Question

I used this article as point of reference, in specific this working snippet, but in my page (script below) the vertical snap scrolling isn\'t working. Do you have any idea w

Answer 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

1. Be sure that the displayed scrollbar belongs to the parent div
2. 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-type: mandatory;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent row">

    <section class="one">
</section>
<section class="two">
</section>
<section class="three">
</section>
<section class="four">
</section>

</div>