scroll-snap-type

<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>x 轴强制、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x proximity-scroll-snapping" dir="ltr">
<div>x 轴靠近、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>y 轴强制、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>y 轴靠近、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x mandatory-scroll-snapping" dir="rtl">
<div>x 轴强制、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x proximity-scroll-snapping" dir="rtl">
<div>x 轴靠近、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="rtl">
<div>y 轴强制、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="rtl">
<div>y 轴靠近、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>

 

 

.holster {
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
}
.container {
display: flex;
margin: 1em auto;
outline: 1px dashed lightgray;
flex: none;
overflow: auto;
}
.container.x {
width: 100%;
height: 128px;
flex-flow: row nowrap;
overflow-y: hidden;
}
.container.y {
width: 256px;
height: 256px;
flex-flow: column nowrap;
overflow-x: hidden;
}

/* 滚动吸附 */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}

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

.x.container > div {
line-height: 128px;
font-size: 64px;
width: 100%;
height: 128px;
}
.y.container > div {
line-height: 256px;
font-size: 128px;
width: 256px;
height: 100%;
}

/* 修补外观 */
.y.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}

/* 上色 */
.container > div:nth-child(even) {
background-color: #87ea87;
}
.container > div:nth-child(odd) {
background-color: #87ccea;
}