CSS Scroll Snap - CSS（层叠样式表） | MDNCSS 滚动快照是 CSS 的模块，它引入滚动捕捉位置，它强制滚动位置，即滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap
描述：

CSS 滚动快照是CSS的一个新特性，它引入了一个滚动捕捉的位置的概念，当元素即将停止滚动时，强制调整指定元素的滚动位置到最近的滚动捕捉位置。（与粘性布局十分类似）

兼容性：

兼容性非常不错，甚至在IE10上主要功能属性都可以加上前缀使用。

主要属性

scroll-snap-type:（作用在父元素上）

定义在滚动容器中的一个快照点（snap point）如何被（严格地）执行。

语法:

none | [ x | y | block | inline | both ] [ mandatory | proximity ]

值：

none
当这个滚动容器的可视的 viewport 是滚动的，它会忽略捕捉位置。

x
滚动容器只捕捉其水平轴上的捕捉位置。

y
滚动容器只捕捉其垂直轴上的捕捉位置。

block
滚动容器仅捕捉其轴上块级元素的捕捉位置。

inline
滚动容器仅捕捉其轴上内联元素的捕捉位置。

both
滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）

mandatory（强制性的）
如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

proximity（接近，靠近）
如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

scroll-snap-align:（作用在子元素上）

该特性是将盒子的捕捉位置指定为其捕捉容器的捕捉端口（作为对齐容器）中捕捉区域（作为对齐主题）的对齐方式。这两个值分别指定块轴和内联轴中的捕捉对齐方式。如果只指定了一个值，则第二个值默认为相同的值。（简单来说就是滚动结束后粘在最近的块的哪个位置。。。）

语法：

[ none | start | end | center ]{1,2}

值：

none
元素在轴中不定义捕捉位置。

start
元素的滚动快照位置在轴的起始位置。

end
元素的滚动快照位置在轴的终点位置。

center
元素的滚动快照位置在轴的中心位置。

使用

https://codepen.io/ythinker/pen/zYEzMVYhttps://codepen.io/ythinker/pen/zYEzMVY

CSS 滚动快照 Scroll Snap相关推荐

CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
[css] 遇到overflow: scroll不能平滑滚动怎么解决？
[css] 遇到overflow: scroll不能平滑滚动怎么解决? ipone 上解决方法是这样的, -webkit-overflow-scrolling: touch; 个人简介我是歌谣,欢迎 ...
[css] 使用overflow: scroll时不能平滑滚动怎样解决？
[css] 使用overflow: scroll时不能平滑滚动怎样解决? scroll-behavior: smooth; 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
web前端入门到实战：CSS 滚动捕捉技术（Scroll Snapping）
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置.非常适合用来建立下面这样的应用: 基本使用实现滚动捕捉主要依靠两个属性:容器元素的 scroll-snap-type 属性,以及子元素 ...
css界面内容可滚动_带有CSS滚动捕捉点的直观滚动界面
css界面内容可滚动 Scroll Snap Points are a native CSS-only technique that you can use to create layouts whe ...
css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
[转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
滚动（scroll）操作的应用
说明滚动(scroll) 在LVGL中,滚动的工作原理非常简单,如果对象超出父对象内容区域(即无填充大小),则父对象的空间变为可滚动,任何对象都可滚动. 滚动条为对象的一个部件,通过 ...
ES - 滚动查询(scroll)
Elasticsearch - 滚动查询scroll 简介实践中我使用到滚动的场景 from-size分页的缺点 json处理步骤案例如下 java 处理步骤代码逻辑简化版java代码如下: ...

CSS 滚动快照 Scroll Snap

CSS Scroll Snap - CSS（层叠样式表） | MDNCSS 滚动快照是 CSS 的模块，它引入滚动捕捉位置，它强制滚动位置，即滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap
描述：

兼容性：

主要属性

scroll-snap-type:（作用在父元素上）

语法:

值：

scroll-snap-align:（作用在子元素上）

语法：

值：

使用

CSS 滚动快照 Scroll Snap相关推荐

最新文章

热门文章

CSS 滚动快照 Scroll Snap

CSS Scroll Snap - CSS（层叠样式表） | MDNCSS 滚动快照是 CSS 的模块，它引入滚动捕捉位置，它强制滚动位置，即 滚动容器的 滚动端口 在滚动操作完成后可能结束的滚动位置。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap 描述：

兼容性：

主要属性

scroll-snap-type:（作用在父元素上）

语法:

值：

scroll-snap-align:（作用在子元素上）

语法：

值：

使用

CSS 滚动快照 Scroll Snap相关推荐

最新文章

热门文章

CSS Scroll Snap - CSS（层叠样式表） | MDNCSS 滚动快照是 CSS 的模块，它引入滚动捕捉位置，它强制滚动位置，即滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap
描述：