CSS | scroll snap
The CSS Scroll Snap is an inbuilt module. It introduces the scroll snap position to web technology. The scroll container’s scroll-port work when the scrolling operation did its job. This module is new in HTML 5 before that there was a similar module known as Scroll Snap Point which has been removed and replaced by this Scroll Snap module.
There are two types of properties in Scroll Snap module one is for Containers and the other ones are for children of those containers.
CSS Properties on Containers:
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 on Children:
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. |
Supported Browsers: The browsers supported by Scroll Snap modules are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera