CSS scroll-snap on most browsers

[huygn]

Tested on latest Chrome/Safari/Firefox.

.fullscreen-container {
  --header-height: 81px;
  --section-height: calc(100vh - var(--header-height));

  /* https://caniuse.com/#feat=css-snappoints */
  /* for firefox/edge (old version of the spec) */
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(var(--section-height));

  /* for chrome/safari (new version of spec) */
  scroll-snap-type: y mandatory;

  /* padding top due to fixed header */
  scroll-padding-top: var(--header-height);

  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fullscreen-child {
  scroll-snap-align: start;
  height: calc(var(--section-height));
}

Important note for Safari

.fullscreen-child must NOT have overflow-x: hidden in order for scroll snaping to work properly on Safari.