Open In App

CSS | scroll snap

Improve
Improve
Like Article
Like
Save
Share
Report

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

Last Updated : 30 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads