直接分享代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css实现滚动贴合效果</title>
<style>
body {
overflow: hidden; //避免出现双滚动条
}
/* 核心样式 */
main {
scroll-snap-type: y mandatory;
/* 需要把滚动条设置到直接父容器,
scroll-snap-type 才能生效,
默认是在 body 上,现在是 main 上 */
overflow-y: scroll;
overflow-x: hidden;
height: 100vh;
}
section {
width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
line-height: 100vh;
font-size: 28px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
有帮助的话,动动小手点个赞吧