<div class="scrollport">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

:root {
  font: bold 1000% / 1 sans-serif;
  inline-size: 100vi;
  block-size: 100vb;
}

html,
body {
  inline-size: inherit;
  block-size: inherit;
  padding: 0;
  margin: 0;
}

.scrollport {
  display: flex;
  flex-direction: column;
  scroll-snap-type: block mandatory;
  overflow-y: scroll;
  block-size: 100vb;
}

div:not(.scrollport) {
  align-items: center;
  display: flex;
  flex: 0 0 100vb;
  justify-content: center;
  scroll-snap-stop: always;
  scroll-snap-align: start;
}

div:nth-child(even) {
  background: pink;
}

div:nth-child(odd) {
  background: lightgreen;
}