Hi~，我是 一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~
🍎 写在前面
前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。
这篇文章将介绍如下内容：
- CSS滚动捕捉
overscroll-behavior属性scroll-behavior属性scrollbar-gutter属性
🍈 CSS滚动捕捉
与CSS滚动捕捉相关的属性可以分为两类：
作用在父容器上的属性：
scroll-snap-type、scroll-padding*；其实还有一个
scroll-snap-stop属性，但是这个属性我实在没有测试出效果，这里就掠过吧- 作用在子元素上的属性：
scroll-snap-align、scroll-margin*。
我们先来看一下scroll-snap-type属性，MDN中给的定义是在滚动容器中的一个临时点（snap point）如何被严格的执行。说人话就是这个属性定义了一个容器如何处理滚动的结束状态，如果还是不明白我们直接先看一个例子：
上面这个例子中，当切换scroll-snap-type: x mandatory;时，在混动的时候子元素最终停留的位置一定是子元素的开头，不会出现各占一半的尴尬情况。
上面例子中的核心代码如下：
.scroll {
scroll-snap-type: x mandatory;
}
.scroll .item {
/* 必要属性 */
scroll-snap-align: start;
}这里我们就来解释一下上面的代码：
scroll-snap-type的x表示在x轴滚动，除x外还包含y | block | inline | both；scroll-snap-type的mandatory表示强制滚动到我们指定的位置；除
mandatory还存在proximity，这个值表示看当前的情况，决定是否滚动到指定位置（这里可以通过上面的例子自行体验区别）；scroll-snap-align的start表示当前滚动子元素在滚动方向上相对于父容器的对齐方式，有三个值，分别是start、center和end。
scroll-snap-align三个值的区别如下所示：
我们可以切换来查看不同值的不同效果。
剩下的两个属性scroll-padding*和scroll-margin*可以精确的控制滚动的偏移量，这里就不演示了，感兴趣的小伙伴可以自行体验。
最后提一下，这几个属性的浏览器兼容性非常良好，除了IE都支持，就算是写了IE不支持也没有什么坏影响。
🍑 overscroll-behavior属性
CSS中的overscroll-behavior是一个合并写法，可以拆分为overscroll-behavior-x和overscroll-behavior-y，它控制的是当元素滚动到边界后继续滚动的效果。
它的值有三个，分别是
auto：默认效果；contain：依旧触发滚动到底部的效果（反弹），但是临近的滚动区域不会被影响；none：不会触发触底效果也不会影响临近的滚动区域。
示例如下：
如果文章中没有区别的话可以去码上掘金体验
当overscroll-behavior的值为auto时，在列表区域滚动到底时会影响其他区域的滚动，当不为auto时就不会影响其他区域的滚动。
这个属性的浏览器兼容性很不错，可以放心使用。
🍒 scroll-behavior属性
CSS中的scroll-behavior属性可以为浏览器的滚动行为添加一个动画效果，它有两个值，一个是auto，另一个就是smooth，第二个值就可以为默认的滚动效果添加动画，示例如下：
浏览器兼容情况如下：
除了IE基本都支持。
🍓 scrollbar-gutter属性
CSS中的scrollbar-gutter属性的出现了解决了一个经典的问题：当页面出现与隐藏滚动条时页面跳动的问题；出现这个问题的原因是因为滚动条会占据页面的宽度，所以隐藏和显示时可用宽度或者高度会减少。
这个属性有三个值：
auto：默认表现；stable：如果元素的overflow的计算值不是visible，则会预留除滚动条的位置，这样出现滚动条时也不会跳动；both-edges：为两侧都预留空白，可以让其绝对的居中对齐，要配合stable一起使用。
示例代码如下：
例子中的主要核心代码如下：
.auto {
scrollbar-gutter: auto;
}
.stable {
scrollbar-gutter: stable;
}
.both-edges {
scrollbar-gutter: stable both-edges;
}浏览器兼容情况如下：
🥝 写在最后
今天介绍的几个CSS新属性都完全可以在生产环境使用，而且不需要做兜底，就算是浏览器不兼容也无伤大雅，不会有任何不确定的事情发生。
如果对本篇文章对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~
