CSS Scroll Snap是一个内置模块。它将滚动捕捉位置引入到 Web 技术中。当滚动操作完成其工作时,滚动容器的滚动端口工作。此模块是 HTML 5 中的新模块,之前有一个名为Scroll Snap Point的类似模块,该模块已被此Scroll Snap模块删除并替换。
Scroll Snap 模块中有两种类型的属性,一种用于容器,另一种用于这些容器的子项。
容器上的 CSS 属性:
Properties | Description |
---|---|
scroll-snap-type | This property defines how strict snap points are enforced on the scroll container. |
scroll-snap-stop | This property defines whether the scroll container is allowed to “pass over” possible snap positions. |
scroll-padding | This property is a shorthand property that defines all of the scroll-padding-* |
scroll-padding-top | This property defines offsets for the top of the optimal viewing region of the scrollport. |
scroll-padding-right | This property defines offsets for the right of the optimal viewing region of the scrollport. |
scroll-padding-bottom | This property defines offsets for the bottom of the optimal viewing region of the scrollport. |
scroll-padding-left | This property defines offsets for the left of the optimal viewing region of the scrollport. |
scroll-padding-inline | This property is a shorthand property which sets the scroll-padding longhand for the inline dimension. |
scroll-padding-inline-start | This property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport. |
scroll-padding-inline-end | This property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport. |
scroll-padding-block | This property is a shorthand property which sets the scroll-padding longhand for the block dimension. |
scroll-padding-block-start | This property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport. |
scroll-padding-block-end | This property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport. |
儿童的 CSS 属性:
Properties | Description |
---|---|
scroll-snap-align | This property defines the box’s snap position as an alignment of its snap area. |
scroll-margin | This property is a shorthand property that defines all of the scroll-margin. |
scroll-margin-top | This property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. |
scroll-margin-right | This property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. |
scroll-margin-bottom | This property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. |
scroll-margin-left | This property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. |
scroll-margin-inline | This property is a shorthand property which sets the scroll-margin longhand for the inline dimension. |
scroll-margin-inline-start | This property defines margin of the scroll snap area at the start of the inline dimension. |
scroll-margin-inline-end | This property defines margin of the scroll snap area at the end of the inline dimension. |
scroll-margin-block | This property is a shorthand property which sets the scroll-margin longhand for the block dimension. |
scroll-margin-block-start | This property defines the margin of the scroll snap area at the start of the block dimension. |
scroll-margin-block-end | This property defines the margin of the scroll snap area at the end of the block dimension. |
支持的浏览器: Scroll Snap 模块支持的浏览器如下:
- 谷歌浏览器
- IE浏览器
- 火狐
- 苹果浏览器
- 歌剧