CSS Scroll Snapping, vertical not working

The major problem in the 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 is 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>