JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="container y mandatory-scroll-snapping" dir="ltr">
  <div>Y Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

CSS

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}


.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}


.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}


.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}


.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}
/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}