- A+
依据 CSS Scroll Snap Module Level 1 范例，CSS 新增了一批能够掌握转动的属性，让转动能够在仅仅经由过程 CSS 的掌握下，获得许多底本须要 JS 剧本参与才完成的优美交互。
Tips：本文截的一些 Gif 图触及容器转动，结果不是很好，能够点进 Demo 里现实感觉下。
sroll-snap-type
起首看看 sroll-snap-type 大概算得上是新的转动范例内里最中心的一个属性款式。
scroll-snap-type：属性定义在转动容器中的一个临时点（snap point）怎样被严厉的实行。
光看定义有点难明白，简朴而言，这个属性划定了一个容器是不是对内部转动行动举行捕获，而且划定了怎样去处置惩罚转动完毕状况。
语法
{
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
}
举个例子，假定，我们愿望一个横向可转动容器，每次转动以后，子元素终究的住手位置不是为难的被支解，而是完全的呈现在容器内，能够如许写：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul {
scroll-snap-type: x mandatory;
}
li {
scroll-snap-align: center;
}
上面 scroll-snap-type: x mandatory 中，x 示意捕获 x 轴方向上的转动，mandatory 示意强迫将转动完毕后元素的住手位置设置到我们划定的处所。
左侧是一般转动容器的写法，右侧是增加了 scroll-snap- 以后：
假如是 y 轴方向的转动也是一样的，只须要简朴改一下 scroll-snap-type：
ul {
scroll-snap-type: y mandatory;
}
CodePen Demo -- CSS Scroll Snap Demo
scroll-snap-align 中的 mandatory 与 proximity
scroll-snap-align 中的别的一个重点就是 mandatory 与 proximity。
-
mandatory: 通常在 CSS 代码中我们都邑运用这个，mandatory 的英文意义是强迫性的，示意转动完毕后，转动住手点一定会强迫停在我们指定的处所
-
proximity: 英文意义是靠近、邻近、约莫，在这个属性中的意义是转动完毕后，转动住手点大概就是转动住手的处所，也大概会再举行分外挪动，停在我们指定的处所
也就是说，如上指定了 scroll-snap-align: y proximity 的转动容器，假如不分外设置 scroll-snap-margin/scroll-snap-padding，是有大概停在下面如许~为难~的位置：
scroll-snap-type: both mandatory
固然，另有一种比较特别的状况是，scroll-snap-type: both mandatory，示意横向与竖向的转动，都邑同时举行捕获，也是能够的：
CodePen Demo -- CSS Scroll Snap Both mandatory Demo
scroll-snap-align
运用 scroll-snap-align 能够简朴的掌握将要聚焦的当前转动子元素在转动方向上相干于父容器的对齐体式格局。
其须要作用在父元素上，可选值有三个：
{
scroll-snap-align: start | center | end;
}
什么意义呢，看看示意图：
能够类比单个元素在 flexbox 内里的 justify-content 属性的 flex-start | flex-end | center，划定当前元素在主轴上相对父容器的对齐体式格局去明白。
再看看现实的 Demo ，将 scroll-snap-align 增加到转动子容器上：
scroll-snap-align: start
使当前聚焦的转动子元素在转动方向上相干于父容器顶部对齐。
scroll-snap-align: center
使当前聚焦的转动子元素在转动方向上相干于父容器中心对齐。
scroll-snap-align: end
使当前聚焦的转动子元素在转动方向上相干于父容器底部对齐。
CodePen Demo -- CSS Scroll Snap Demo
不规则子元素转动
假如子元素大小不一，也能有非常好的表现，运用 scroll-snap-align: center，使得不规则子元素在每次转动后居于容器中心：
CodePen Demo -- CSS Scroll Snap 不规则子元素转动 Demo
scroll-margin / scroll-padding
上述的 scroll-snap-align 很好用，能够掌握转动子元素与父容器的对齐体式格局。然则可选的值只要三个，有的时刻我们愿望举行一些更邃密的掌握时，能够运用 scroll-margin 或许 scroll-padding
个中：
- scroll-padding 是作用于转动父容器，类似于盒子的 padding
- scroll-margin 是作用于转动子元素，每个子元素的 scroll-margin 能够设置为不一样的值，类似于盒子的 margin
举个例子，在竖向转动下，给转动父容器增加一个 scroll-padding-top: 30px 等同于给每个子元素增加 ``scroll-margin-top: 30px`：
我们愿望转动子元素在 scroll-snap-align: start 的基础上，与容器顶部的间隔为 30px：
<ul class="snap"> <li>1</li> <li>2</li> <li>3</li> ... </ul>
.snap {
overflow-x: auto;
scroll-snap-type: y mandatory;
scroll-padding-top: 30px;
}
li {
scroll-snap-align: start;
}
总结一下就是，scroll-snap-align 能够对转动以后的对齐体式格局举行简朴掌握，而合营 scroll-margin / scroll-padding 则能够举行准确掌握。
烧毁的 scroll-snap-points-x / scroll-snap-points-y
规范的发展过程，早年间的范例现在取销，这个相识一下即可，新规范现在是这几个，而且大部分浏览器已兼容：
- scroll-snap-type
- scroll-snap-align
- scroll-margin / scroll-padding
- scroll-snap-stop
scroll-snap-stop 是一个仍处于实验室的规范，本文没有过量引见，我本身在几个差别浏览器尝试了下，临时没有发明浏览器支撑这个属性，然则最新的规范内里是有关于它的明白的定义的。
现实运用，渐进加强
在现实运用中，运用在全屏转动/广告banner上有许多用武之地：
CodePen Demo -- full screen scroll
固然，兼容性现在照样很大的问题：
不过在许多场景下，就算 scroll-snap- 相干几个属性暂不兼容，也不会对一般运用形成影响，所以在许多场景，这些属性都能够直接运用上去，对支撑的浏览器供应更好的交互。
末了
好了，简朴的科普文，本文到此完毕，愿望对你有协助 
更多出色 CSS 技术文章汇总在我的 Github -- iCSS ，延续更新，迎接点个 star 定阅珍藏。
假如另有什么疑问或许发起，能够多多交换，原创文章，文笔有限，才疏学浅，文中如有不正的地方，万望示知。
