如何实现大屏丝滑滚动？上手scroll-snap！`scroll-snap`属性旨在通过在滚动后将内容捕捉到特定位置来增

scroll-snap属性旨在通过在滚动后将内容捕捉到特定位置来增强滚动体验。它提供了一种创建平滑且精确的滚动行为的方式，特别适用于在滚动式网页和滚动容器中

scroll-snap 有三个子属性用于控制滚动行为的不同方面，分别是 scroll-snap-type ,scroll-snap-align 和 scroll-snap-stop 前两者搭配在日常开发中更为常用

直接上效果

scroll-snap兼容性

从can i use可以看到各大主流浏览器都支持（包括IE）可以放心使用哦

属性介绍

scroll-snap-type

吸附轴常用关键字

scroll-snap-type: x; /* 仅在横轴吸附 */
scroll-snap-type: y; /* 仅在纵轴吸附 */
scroll-snap-type: both; /可在俩轴上独立吸附）/

吸附程度的可选关键字

mandatory(强制的)关键字字面意思，若滚动容器已经滚动了一段距离则必须吸附至下一个吸附位置。
proximity（接近）关键字若滚动容器已经滚动了一段距离，会选择和当前位置更接近的吸附位置吸附

示范写法

scroll-snap-type: x mandatory;
- 表示元素会被强制对齐到水平滚动容器的边界,这意味着元素将始终精确对齐到容器的边缘，创建一种强制性的滚动效果
scroll-snap-type: y proximity;
- 表示元素会尽量对齐到垂直滚动容器的边界,这意味着元素将努力靠近容器的边缘，但不一定会强制精确对齐，而是寻求最接近的对齐方式
scroll-snap-type: both mandatory;
- 表示元素会被强制对齐垂直滚动容器的边界

备注：若吸附口中的内容发生变动（如被添加、移动、删除或改变尺寸）或者与滚动吸附相关的任意属性（如 scroll-snap-type 或 scroll-margin）的值发生变化，则滚动容器将按照 scroll-snap-type 最新的值重新吸附

scroll-snap-align

scroll-snap-align 属性将盒子的吸附位置指定为其吸附区域（作为对齐对象）在其吸附容器的吸附口（作为对齐容器）中的对齐方式。其两值分别指定了在块向轴盒行向轴上的吸附对齐方式。若仅指定一值，则第二值默认为同一值

scroll-snap-align:start; 吸附区域首对齐为此轴上的吸附位置
scroll-snap-align:end; 吸附区域末对齐为此轴上的吸附位置
scroll-snap-align:center; 吸附区域居中对齐为此轴上的吸附位置

当设置为俩值时scroll-snap-align: start end; 第一值为块向，第二值为行向

scroll-snap-stop

scroll-snap-stop 定义滚动容器是否可“越过”吸附位置

scroll-snap-stop: normal; 可“越过”吸附位置
scroll-snap-stop: always; 必须吸附至此元素下一个吸附位置

实操

需求：实现一个全屏滚动效果，设有三个视口，每个视口居中显示一张图片，其中内容在垂直滚动时始终会按照滚动容器的设定对齐到容器的首位。实现类似于一页一页的滚动效果，用户在滚动时只会看到完整、全屏的内容块

结构

<body>
    <main>
        <section>
            <img src="/img/1.png" alt="" />
        </section>
        <section>
            <img src="/img/2.png" alt="" />
        </section>
        <section>
            <img src="/img/3.png" alt="" />
        </section>
    </main>
</body>

样式

其中重点关注这俩个style

main {
	overflow: auto;
	scroll-snap-type: y proximity;
	height: 100vh;
}
section {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
    scroll-snap-stop: always;
	scroll-snap-align: start;
	overflow: hidden;
}

main
- overflow: auto; 当页面内容超出容器高度时，启用垂直滚动条以支持内容的滚动
- scroll-snap-type: y proximity;表示元素会被强制对齐垂直滚动容器的边界
section
- scroll-snap-align: start; 吸附区域首对齐为此轴上的吸附位置
- scroll-snap-stop: always; 必须吸附至此元素下一个吸附位置

完整css

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 16px;
}
body {
	line-height: 1.4;
	font-weight: 400;
	font-family: 'Archivo Black', sans-serif;
	overflow: hidden;
}
main {
	overflow: auto;
	scroll-snap-type: y proximity;
	height: 100vh;
}
img {
	width: 100%;
	height: auto;
	display: block;
}
section {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	scroll-snap-align: start;
	overflow: hidden;
}
section:nth-child(1) {
	background-color: #e91e63;
}
section:nth-child(2) {
	background-color: #e2b815;
}
section:nth-child(3) {
	background-color: #204233;
}

如何实现大屏丝滑滚动？上手scroll-snap！