What is the scroll-snap in CSS?

Overview

The scroll-snap in CSSCascade Style Sheets is a module that introduces the scroll-snap positions. It allows us to lock the viewport to specific locations or elements when the user has finished scrolling.

The scroll-snap is an easy way to force the scroll so that it can behave in an exact and specific manner. If the user has finished scrolling, the scroll-snap ensures that the scroll bar stops at the position we want to stop.

The scroll-snap module has two properties, one for the container and the other for the children of that container.

Container properties

  • scroll-snap-type: This property defines how much we want the snap points to be strictly enforced on the scroll container.

  • scroll-snap-stop: This property defines whether we want the scroll container to pass over the multiple snap positions.

  • scroll-padding: This property defines the padding for the scroll.

  • scroll-padding-left: This property defines the scrollport’s left optimal viewing region.

  • scroll-padding-right: This property defines the scrollport’s right optimal viewing region.

  • scroll-padding-top: This property defines the scrollport’s top optimal viewing region.

  • scroll-padding-bottom: This property defines the scrollport’s bottom optimal viewing region.

  • scroll-padding-block: This property sets the scroll-padding for the block dimension.

  • scroll-padding-inline: This property sets the scroll-padding for the inline dimension.

  • scroll-padding-inline-start: This property defines the offsets for the start edge in the inline dimension.

  • scroll-padding-inline-end: This property defines the offsets for the end edge in the inline dimension.

  • scroll-padding-block-start: This property defines the offsets for the start edge in the block dimension.

  • scroll-padding-block-end: This property defines the offsets for the end edge in the block dimension.

Children properties

  • scroll-snap-align: This property defines the alignment of the box’s snap position.

  • scroll-margin: This property defines the scroll-margin.

  • scroll-margin-left: This property defines the left margin area for the scroll snap area.

  • scroll-margin-right: This property defines the right margin area for the scroll snap area.

  • scroll-margin-top: This property defines the top margin area for the scroll snap area.

  • scroll-margin-bottom: This property defines the bottom margin area for the scroll snap area.

  • scroll-margin-inline: This property defines the scroll-margin for the inline dimension.

  • scroll-margin-inline-start: This property defines the margin for the scroll snap area at the start of the inline dimension.

  • scroll-margin-inline-end: This property defines the margin for the scroll snap area at the end of the inline dimension.

  • scroll-margin-block: This property defines the scroll-margin for the block dimension.

  • scroll-margin-block-start: This property defines the margin for the scroll snap area at the start of the block dimension.

  • scroll-margin-block-end: This property defines the margin for the scroll snap area at the end of the block dimension.

Code

The following is the basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the scroll-snap property:

Explanation

HTML

  • Line 1: We make a div that covers the whole area.
  • Lines 2–6: We make five divs to use the scroll-snap.

CSS

  • Lines 1–13: We set the styling for the whole section.
  • Lines 15–25: We set the styling for the individual sections.
  • Lines 29–53: We set the background color for each item.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)