scroll-snap-type 优化滚动

CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。

scroll-snap-type CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

语法

参数解析

none:当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点。
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;
}

三个li可以在横轴容器内滚动。
scroll-snap-align属性为子元素相对于父容器的对其方式，可选值又 start|center|end 选择center可以使子元素居中等分展示到容器。

左侧为默认的滚动方式，右侧为增加了scroll-snap-type 属性的滚动。y轴上的滚动只需要修改下属性的x为y就可以实现。

scroll-snap-align :属性为子元素相对于父容器的对其方式

如上图展示，取值start时，则子元素对其父元素的方式对其起始位置，end则为对其结束位置，center为对其中间位置。
如果子元素大小不一，也能有非常好的表现，使用 scroll-snap-align: center，使得不规则子元素在每次滚动后居于容器中间：

浏览器支持情况

参考文章

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
https://github.com/chokcoco/iCSS/issues/74

优化滚动的一个小技巧：scroll-snap-type相关推荐

细说接口性能优化的11个小技巧
前言接口性能优化对于从事后端开发的同学来说,肯定再熟悉不过了,因为它是一个跟开发语言无关的公共问题. 该问题说简单也简单,说复杂也复杂. 有时候,只需加个索引就能解决问题. 有时候,需要做代码重构. ...
详细的聊聊接口性能优化的11个小技巧不收藏对不起我
前言接口性能优化对于从事后端开发的同学来说,肯定再熟悉不过了,因为它是一个跟开发语言无关的公共问题. 该问题说简单也简单,说复杂也复杂. 有时候,只需加个索引就能解决问题. 有时候,需要做代码重构. ...
聊聊接口性能优化的11个小技巧
点击下方"IT牧场",选择"设为星标" 前言接口性能优化对于从事后端开发的同学来说,肯定再熟悉不过了,因为它是一个跟开发语言无关的公共问题. 该问题说简单也简 ...
java 代码性能优化_Java代码性能优化的几个小技巧
Java代码性能优化的几个小技巧时间:2017-08-07 来源:华清远见JAVA学院代码优化是程序员必须懂得一门学问,所以不管是程序员还是准程序员,养成良好的代码优化习惯都是必须要养成的 ...
大脸猫：网站优化SEO一些不为人知的小技巧
网站优化的目的就是使网站更容易被搜索引擎收录,提高用户体验(UE)和转化率进而创造价值. SEO正是借助你在网上发布的产品信息,把你的内容发送到无数的搜索客户面前,所以SEO的初级定义就是发信息,宣传 ...
Oracle中删除数据的一个小技巧
在我带的某个Project中,在开发阶段需要Reload相同的Data到Oracle中来进行测试,因此需要不断的删除数据,简单的Delete操作似乎就OK了,但其实不然.我们到知道建表的时候需要Tab ...
python中template是什么意思啊_Python中Template使用的一个小技巧
Python中Template是string中的一个类,可以将字符串的格式固定下来,重复利用. from string import Template s = Template("there ...
配音是怎么制作出来的，想做出让人惊艳的配音，只需一个小技巧
配音是怎么制作出来的,想做出让人惊艳的配音,只需一个小技巧配音,除了是一部分赖以为生的技能之外,也是很多小伙伴打发时间的娱乐方式.专业的配音演员可以让影视剧.动漫的内容拥有灵魂,也可以通过阅读有声书 ...
短视频的地方搞笑配音怎么做？分享一个小技巧，不会方言也能配
短视频的地方搞笑配音怎么做?分享一个小技巧,不会方言也能配各位小伙伴在刷短视频的时候,相信也经常会看到一些有趣的地方搞笑配音短视频,有趣的画面配上独具一格的地方方言,着实很轻易就可以让人哈哈大笑.那 ...

优化滚动的一个小技巧：scroll-snap-type