效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fcffd215bc94a2295d6ca7df01929bb3.gif)
代码
<div class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
body {
margin: 0;
padding: 0;
}
.parent {
width: 100vw;
height: 100vh;
overflow: auto;
white-space: nowrap;
scroll-snap-type: x mandatory;
font-size: 0;
}
.item {
width: 100%;
height: 100%;
scroll-snap-align: end;
display:inline-block;
line-height: 100px;
text-align: center;
font-size: 50px;
}
.parent :nth-child(1) {
background:red;
}
.parent :nth-child(2) {
background:blue;
}
.parent :nth-child(3) {
background:green;
}
</style>