前言
整屏滑动是比较常见的场景，用户只需要轻轻滑动一下，即可切换整屏的内容，对用户体验， UI排版来说是很有用的，之前我们实现这个功能需要借助一些js来实现，现在仅仅只需要两个css即可轻松搞定, 这就是我们今天要介绍的 scroll-snap 。
scroll-snap-type
摘要
scroll-snap-type属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。如果使用了scroll-snap-type那么他会根据指定的值处理你的子节点分成临时点或者忽略临时点
/* 关键值 */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;
/* 可选值 mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;
属性值介绍
none 是scroll-snap-type的默认值，值为 none 时当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点x 规定了scroll-snap-type的方向，即滚动容器只捕捉其水平轴上的捕捉位置y 规定了scroll-snap-type的方向，即滚动容器只捕捉其水平轴上的捕捉位置block 滚动容器仅捕捉到其块轴上的捕捉位置inline 滚动容器仅捕捉到其内联轴上的捕捉位置both 滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）即x,y的滚动都会被捕获mandatory 通常会跟随x、y、both使用，如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上，也就是说， 用户轻轻滑动一次， 即可实现使得整个临时点被切换，从而实现整屏滑动proximity 通常也会跟随x、y、both使用，如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上
那么 proximity 和 mandatory 的区别是什么呢，proximity 会达到一定的临界值才会触发切换临时点， 否则就是会按照viewport的方式去滚动。 而 mandatory 则每次都会在临时点的标记上，并不会按照viewport的方式去滚动， 通俗来说，用户每次滑动， mandatory到达临界点时会切换临时点，否则回弹至初始临时点，而proximity会正常的滑动，只有到达了临界点，才会触发切换临时点，否则就是与平常滑动操作反应无异
scroll-snap-align
摘要
scroll-snap-align属性指定方框的snap位置作为其snap区域(作为对齐主题)在其snap容器的snapport(作为对齐容器)内的对齐位置。这两个值分别指定块轴和行内轴上的捕捉对齐方式。如果只指定了一个值，第二个值默认为相同的值。
/* 关键值 */
scroll-snap-align: none;
scroll-snap-align: start end; /* 当两个值第一个设置为块，第二个设置为行内 */
scroll-snap-align: center;
/* 可选值 */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;
属性值
none 该方框没有在该轴上定义一个对齐位置start 这个盒子的滚动snap区域的开始对齐，在滚动容器的snapport中是在这个轴上的一个snap位置end 这个盒子的滚动snap区域的结尾对齐，在滚动容器的snapport内的最终对齐是在这个轴上的一个snap位置center 这个盒子的滚动snap区域的中心对齐，在滚动容器的snapport中是一个在这个轴上的snap位置
使用示例
<!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>H5 整屏滑动</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
scroll-snap-type: y mandatory;
}
section {
width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
line-height: 100vh;
color: #fff;
font-size: 40px;
}
</style>
</head>
<body>
<div class="body">
<section style="background-color: rgb(8, 163, 5);">1</section>
<section style="background-color: rgb(255, 0, 51);">2</section>
<section style="background-color: rgb(0, 34, 255);">3</section>
<section style="background-color: rgb(255, 123, 0);">4</section>
<section style="background-color: rgb(57, 60, 60);">5</section>
</div>
</body>
</html>
可以复制这段代码跑起来自己看看效果，我们可以看到我们每次触发滚动之后，都会自动给我们定位到我们设置的临时点。 不管是X轴还是Y轴， 写法都是一样的，我们使用两行css很轻松就实现了整屏滚动的效果
兼容性
原文链接：https://juejin.cn/post/7247740398561443900 作者：刘圣凯
