# CSS Scroll Snapping滚动吸附锁定元素或位置

> CSS scroll snapping可以使使web滚动吸附锁定到元素片段位置，进而提升用户对页面的视觉体验效果。通过设置该属性可以对XY纵横滚动加以锁定控制，从而使得元素信息更好的展示在用户可视范围内。

Author: DeathGhost
Published: 2018-12-02 23:49:43
Category: css
Canonical: https://www.deathghost.cn/article/css/40
Keywords: scroll-margin, scroll-padding, scroll-snap-align, scroll-snap-stop, scroll-snap-type, 滚动, 定位, 吸附

CSS通过对容器设置scroll-snap-type及其子元素设置scroll-snap-align属性即可达到控制滚动位置或滚动锁定，使得设计元素信息更完整且友好地展示在用户视觉范围内。

实际应用场景于固定容器范围内对片段式内容进行x、y方位进行滚动定位（移动端全屏式片段、图片列表滚动等等亦或文本型片段信息）。

下面通过简单的动画对scroll-snap*初步了解。

![css scroll-snap*](https://www.deathghost.cn/public/upload/article/2018/12/1543764154247.gif)

 CSS Scroll Snapping

scroll-snap-type属性可设置x、y纵横滚动轴，上面的例子是对其x轴作以演示，y轴大家可以动手自己测试看效果，这里就不多言了。我们接下来看看其属性值：

scroll-snap-type:none | [ x | y | block | inline | both ] [ mandatory | proximity ]
scroll-snap-align属性则对其子元素进行设置，主要就是对元素的捕获吸附点位置设置，其属性值如下：

scroll-snap-align: [ none | start | end | center ]{1,2}
其他更多属性大家可以参考这里：https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

由于兼容性的问题，这里就不做深入详述，具体大家可以参考上述地址研究；这里仅做以笔记初步认识，在适当的情况下可以加以利用；相信不久的将来我们就可以更好的应用到PC端与移动端。

## Related

- Previous: [flex网页布局首选方案 灵活应用css flex弹性布局快速构建web结构](https://www.deathghost.cn/article/css/38)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)