📜  CSS |滚动快照

📅  最后修改于: 2021-08-30 12:57:16             🧑  作者: Mango

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浏览器
  • 火狐
  • 苹果浏览器
  • 歌剧