Scroll Snap

CSS Scroll Snap

CSS Scroll Snap 是 CSS 中的一个独立模块,用于在容器停止滚动时,自动平滑到指定元素的指定位置。

API

Scroll Snap 模块的 CSS 属性分为两部分,一部分作用域滚动容器,另一部分作用域希望滚动的指定位置的子元素。

作用于滚动容器作用域子元素
1.scroll-snap-type
2.scroll-snap-stop
3.scroll-snap-padding
1.scroll-snap-align
2.scroll-snap-margin

scroll-snap-type

1
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

scroll-snap-type 用于定义滚动捕捉轴 (snap axis) 以及滚动捕获的严格性 (snap strictness) 。

Demo

Scroll Snap Strictness

定义滚动捕获轴的位置

  • none

    默认值,忽略滚动时捕捉

  • x

    在水平方向捕获定位点

  • y

    在垂直方向捕获定位点

  • block

    在块级元素排列的方向捕获定位点,一般为垂直方向

  • inline

    在内联元素排列的方向捕获定位点,一般为水平方向

  • both

    在水平和垂直方向都捕获定位点

Scroll Snap Strictness
  • mandatory

    每次滚动结束都会强制捕获

  • proximity

    每次滚动结束有可能会进行捕获,方式为就近捕获

scroll-snap-stop

1
scroll-snap-stop: normal | always

scroll-snap-stop 表示在滚动过程中是否允许跳过中间的捕获点

这个属性可以实现每次滚动一屏的效果,不会一下滚动多屏。

  • noraml

    默认值,允许忽略

  • always

    不能忽略中间的捕获点,不许定位到第一个捕获元素的位置。

scroll-padding

1
scroll-padding: [ <length-percentage> | auto ]{1,4}

为滚动容器设置 padding 值,语法与 padding 一样。

scroll-snap-align

1
scroll-snap-align: [ none | start | end | center ]{1,2}

scroll-snap-align 作用于子元素上,用于定义子元素的对齐方式;该属性支持两个属性值,第一个属性值表示 block 元素的对齐方式,第二个属性值表示 inline 元素的对齐方式

  • none

    默认值,不定义对齐位置

  • start

    与滚动容器的起始位置对齐,如:scroll-snap-type: y mandatory 时,子元素和滚动容器的上边缘对齐

  • end

    与滚动容器的结束位置对齐,如:scroll-snap-type: y mandatory 时,子元素和滚动容器的下边缘对齐

  • center

    子元素与滚动容器的中心对齐

scroll-margin

1
scroll-margin: <length>{1,4}

为子元素设置 margin 值,语法与 margin 一样。

Demo

参考