body {
  margin: 0;
}

#scroller {
  position: absolute;
  width: 400px;
  height: 400px;
  overflow: scroll;
  padding: 0;

  scroll-snap-type: both mandatory;
}

.snap {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;

  scroll-snap-align: start;
}

#space {
  position: absolute;
  width: 1000px;
  height: 1000px;
}

.left {
  left: 0;
}

.top {
  top: 0;
}

.right {
  left: 400px;
}

.bottom {
  top: 400px;
}