其实没什么难点，主要就是两个CSS属性
- scroll-snap-type 这个是作用在包裹容器身上的.
- scroll-snap-align 这个是作用在被包裹容器身上的.
效果如下图所示:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css scroll-snap</title>
<style>
/* setup */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
width: 100%;
height: 500px;
scroll-snap-type: x mandatory;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
line-height: 500px;
font-size: 64px;
width: 100%;
height: 500px;
}
.container > div:nth-child(even) {
background-color: #87ea87;
}
.container > div:nth-child(odd) {
background-color: #87ccea;
}
</style>
</head>
<body>
<div class="container">
<div>Node.js</div>
<div>Vue</div>
<div>MySQL</div>
</div>
</body>
</html>