一、滚动贴合介绍
滚动贴合：鼠标滚动的时候，自动贴合到浏览器的底部或顶部
设置CSS滚动贴合需要使用到两个属性：
1、给滚动容器设置scroll-snap-type，值为滚动的方向和方式
.container {
/* display: flex; */
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: y mandatory;
}
2、给滚动的内容设置scroll-snap-align，即滚动贴合的对齐方式，值为start、center、end
.child{
/* 设置子元素的贴合对齐方式 */
scroll-snap-align: center;
}
二、未使用滚动贴合时的效果
使用之前代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
height: 100vh;
}
section{
width: 100vw;
height: 100vh;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(1){
background-color: #7f97ae;
}
main > section:nth-child(2){
background-color: #c6b9a3;
}
main > section:nth-child(3){
background-color: #bbcadc;
}
main > section:nth-child(4){
background-color: #d7c6d9;
}
main > section:nth-child(5){
background-color: #bfbea8;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果如下：
发现用鼠标滚轮滚动时，页面不会自动贴合到浏览器的顶部或者底部
三、使用滚动贴合
假设我们有四屏的内容需要垂直滚动贴合，我们用main元素表示滚动的容器，四个section表示要滚动贴合的内容。
每个section都设置为占满全屏，即宽为100vw，高为100vh。
使用之后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: y mandatory;
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
height: 100vh;
}
section{
width: 100vw;
height: 100vh;
/* 设置子元素的贴合对齐方式 start表示下一屏的内容会直接贴合到main元素的顶部*/
scroll-snap-align: start;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(1){
background-color: #7f97ae;
}
main > section:nth-child(2){
background-color: #c6b9a3;
}
main > section:nth-child(3){
background-color: #bbcadc;
}
main > section:nth-child(4){
background-color: #d7c6d9;
}
main > section:nth-child(5){
background-color: #bfbea8;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果如下：
这样就实现了滚动贴合的效果
（1）、如果我们把section的高度加长为150vh，再把scroll-snap-align的属性设置为end，那么滚动的时候，下一屏内容的底部就会贴合到main元素的底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: y mandatory;
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
height: 100vh;
}
section{
width: 100vw;
height: 150vh;
/* 设置子元素的贴合对齐方式 */
scroll-snap-align: end;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(1){
background-color: #7f97ae;
}
main > section:nth-child(2){
background-color: #c6b9a3;
}
main > section:nth-child(3){
background-color: #bbcadc;
}
main > section:nth-child(4){
background-color: #d7c6d9;
}
main > section:nth-child(5){
background-color: #bfbea8;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果如下：
（2）、如果我们把section的高度加长为150vh，再把scroll-snap-align的属性设置为center，那么滚动的时候，下一屏内容就会和main元素垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
/* display: flex; */
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: y mandatory;
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
height: 100vh;
}
section{
width: 100vw;
height: 150vh;
/* 设置子元素的贴合对齐方式 */
scroll-snap-align: center;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(1){
background-color: #7f97ae;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(2){
background-color: #c6b9a3;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(3){
background-color: #bbcadc;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(4){
background-color: #d7c6d9;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果如下：
四、水平滚动贴合
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
display: flex;
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: x mandatory;
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
width: 100vw;
height: 100vh;
}
section{
width: 100vw;
height: 100vh;
/* 设置子元素的贴合对齐方式 */
scroll-snap-align: center;
flex-shrink: 0;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(1){
background-color: #7f97ae;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(2){
background-color: #c6b9a3;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(3){
background-color: #bbcadc;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(4){
background-color: #d7c6d9;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果如下：
五、使用proximity小于一定距离的时候进行贴合
使用mandatory强制贴合的方式，适合内容尺寸较小的情况，如果有的元素内容非常长，那么在滚动的时候，会直接滑动到下一屏，导致不在屏幕上的内容很快就会滑过，这时候，我们可以把scroll-snap-type属性的第二个值改为proximity，这样让元素滚动到离贴合点小于一定距离的时候再进行贴合，这个距离是根据浏览器自己规定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: y proximity;
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
height: 100vh;
}
section{
width: 100vw;
height: 100vh;
/* 设置子元素的贴合对齐方式 */
scroll-snap-align: end;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(1){
background-color: #7f97ae;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(2){
background-color: #c6b9a3;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(3){
background-color: #bbcadc;
height: 250vh;
display: flex;
justify-content: center;
align-items: center;
}
main > section:nth-child(4){
background-color: #d7c6d9;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果如下：
六、设置sticky头部时的滚动贴合
在贴合的时候，我们还可以给容器设置间距，让贴合点偏离浏览器底部或顶部一些距离，当有一个position为sticky头部时，由于它占据了一定的空间，如果直接设置滚动贴合，那么元素会贴合到main元素的顶部，这样会有一部分内容被sticky头部覆盖，这种情况下我们可以给滚动的容器main元素设置scroll-padding，大小跟sticky头部的高度一致，这样就能在贴合的时候，与main元素有一定的间距，从而把头部的空间流出来。
scroll-padding和padding的取值方式是一样的，分别是上右下左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
/* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
第二个值表示贴合方式，mandatory表示强制滚动 */
scroll-snap-type: y mandatory;
scroll-padding: 80px;
/* 需要把滚动条设置到直接父容器，
scroll-snap-type才能生效，
默认是再body上，现在是在main上 */
overflow: scroll;
height: 100vh;
}
h1{
height: 80px;
position: sticky;
top: 0;
background-color: red;
}
section{
width: 100vw;
height: 100vh;
/* 设置子元素的贴合对齐方式 */
scroll-snap-align: start;
}
/* 给每个页面设置不同的颜色用于区分 */
main > section:nth-child(2){
background-color: #7f97ae;
}
main > section:nth-child(3){
background-color: #c6b9a3;
}
main > section:nth-child(4){
background-color: #bbcadc;
}
main > section:nth-child(5){
background-color: #663d69;
}
</style>
</head>
<body>
<main>
<h1>H1标题</h1>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
</body>
</html>
效果：
七、列表滚动
滚动贴合不仅仅可以用于全屏滚动，也可以用于ul这种小的列表滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
ul{
width: 200px;
height: 200px;
scroll-snap-type: y mandatory;
overflow-y:scroll; /*只是y方向*/
list-style: none;
/* 隐藏x向滚动条 */
overflow-x: hidden;
}
li{
scroll-snap-align: start;
}
/* 给每个页面设置不同的颜色用于区分 */
ul > li:nth-child(1){
background-color: #7f97ae;
width: 200px;
height: 200px;
}
ul > li:nth-child(2){
background-color: #c6b9a3;
width: 200px;
height: 200px;
}
ul > li:nth-child(3){
background-color: #bbcadc;
width: 200px;
height: 200px;
}
ul > li:nth-child(4){
background-color: #663d69;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<main>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</main>
</body>
</html>
效果如下：
标签：滚动,background,color,section,贴合,main,scroll,CSS From： https://www.cnblogs.com/zwh0910/p/17932048.html