Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

CSS | scroll snap

  • Last Updated : 30 Sep, 2019

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:

PropertiesDescription
scroll-snap-typeThis property defines how strict snap points are enforced on the scroll container.
scroll-snap-stopThis property defines whether the scroll container is allowed to “pass over” possible snap positions.
scroll-paddingThis property is a shorthand property that defines all of the scroll-padding-*
scroll-padding-topThis property defines offsets for the top of the optimal viewing region of the scrollport.
scroll-padding-rightThis property defines offsets for the right of the optimal viewing region of the scrollport.
scroll-padding-bottomThis property defines offsets for the bottom of the optimal viewing region of the scrollport.
scroll-padding-leftThis property defines offsets for the left of the optimal viewing region of the scrollport.
scroll-padding-inlineThis property is a shorthand property which sets the scroll-padding longhand for the inline dimension.
scroll-padding-inline-startThis property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport.
scroll-padding-inline-endThis property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport.
scroll-padding-blockThis property is a shorthand property which sets the scroll-padding longhand for the block dimension.
scroll-padding-block-startThis property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport.
scroll-padding-block-endThis property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport.

CSS Properties on Children:

PropertiesDescription
scroll-snap-alignThis property defines the box’s snap position as an alignment of its snap area.
scroll-marginThis property is a shorthand property that defines all of the scroll-margin.
scroll-margin-topThis property defines the top margin of the scroll snap area that is used for snapping this box to the snapport.
scroll-margin-rightThis property defines the right margin of the scroll snap area that is used for snapping this box to the snapport.
scroll-margin-bottomThis property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport.
scroll-margin-leftThis property defines the left margin of the scroll snap area that is used for snapping this box to the snapport.
scroll-margin-inlineThis property is a shorthand property which sets the scroll-margin longhand for the inline dimension.
scroll-margin-inline-startThis property defines margin of the scroll snap area at the start of the inline dimension.
scroll-margin-inline-endThis property defines margin of the scroll snap area at the end of the inline dimension.
scroll-margin-blockThis property is a shorthand property which sets the scroll-margin longhand for the block dimension.
scroll-margin-block-startThis property defines the margin of the scroll snap area at the start of the block dimension.
scroll-margin-block-endThis 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
Recommended Articles
Page :