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
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.