这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战
scroll-behavior
scroll-behavior用于页面平滑滚动，初始值auto，我们一般在滚动容器元素上使用scroll-behavior：smooth，让容器的滚动变得平滑。
scroll-behavior: smooth;
overflow: hidden;
overscroll-behavior
overscroll-behavior属性可以设置dom元素滚动到边缘时的行为，语法为overscroll-behavior: [contain | none | auto] {1,2}。默认值为auto表示为我们默认看到的滚动行为，意思就是滚动条滚动到边缘后继续滚动外部的可滚动容器。contain默认的滚动溢出行为只会表现在当前元素的内部，比如刷新或者反弹的这种效果，不会对相邻的滚动区域进行滚动，比如浮动滚动，底层元素不会滚动。none的意思相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为。contain和none的行为差异主要体现在移动端。
overscroll-behavior: contain;
overscroll-behavior: auto;
overscroll-behavior: none;
也可以使用多个值混合使用：
overscroll-behavior: auto contain;
scroll-snap
scroll-snap作用可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置。其中scroll-snap-type属性的作用是确定定位方向是水平滚动定位还是垂直滚动定位。接收的属性值也比较多，其中none为默认值，表示滚动时忽略捕捉点，就是我们平时所使用到的滚动。x表示捕捉水平定位点。y表示捕捉垂直平定位点。block表示捕捉和块状元素排列一个滚动方向的定位点，默认文档流下指的是垂直轴。inline表示的是捕捉和内联元素排列一个滚动方向的定位点，默认文档流下指的就是水平轴。both表示的是横轴和纵轴都会捕捉。mandatory表示强制，为可选参数，强制进行定位，也就是说如果有效的定位点位置，则滚动容器必须在滚动结束时进行定位。proximity表示大约，也为可选参数，强制进行定位，也就是说如果存在有效的定位点值，这个值的作用是让浏览器自己判断要不要定位。mandatory和proximity两者效果只有在浏览器滚动容器的窗口尺子比子元素的尺寸还要小的时候，它们的差异才会体现出来。
scroll-snap-align
scroll-snap-align作用是在滚动容器子元素上，表示捕获点是上边缘、下边缘或者中间位置。支持多个属性值。默认值none，意思是不定义位置。start表示的是起始位置对齐，常用于垂直滚动、子元素和容器同上边缘对齐。end表示的是结束位置对齐。常用于垂直滚动、子元素和容器同下边缘对齐。center表示的是居中对齐，子元素中心和滚动容器中心一致。还支持多个属性值混合使用。
scroll-snap-align: start end;
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;
