The CSS scroll-snap-type Property

Overview

The scroll-snap-type property is a key feature in the CSS Scroll Snap Module. It specifies the behavior of a scroll container, determining the strictness and direction of scroll snapping points.

In other words, it controls the points at which a scrolling action will lock after the user has stopped scrolling.

Examples and Usage

Our example consists of an <article> element with several <section> children. Each section represents a distinct topic and contains a heading with a short descriptive text. We'll use the scroll-snap-type property to showcase scroll-snapping behavior in this structure.

Note: This implementation is for demonstration purposes and some aspects may not be the optimal approach in a real use-case scenario.

HTML Structure

<article>
  <section>
    <div>
      <h2>HTML Basics</h2>
      <span>A step-by-step guide to creating your first webpage using HTML.</span>
    </div>
  </section>
  <section>
    <div>
      <h2>Advanced CSS</h2>
      <span>Learn how to add more advanced styles to your HTML structure.</span>
    </div>
  </section>
  <section>
    <div>
      <h2>JavaScript Essentials</h2>
      <span>JavaScript is the most widely-used programming language for web development.</span>
    </div>
  </section>
  <section>
    <div>
      <h2>Python for Data Science</h2>
      <p>Python is a versatile language, widely used in the fields of Machine Learning and Data Science.</p>
    </div>
  </section>
</article>

CSS Styling

/* Resets margins, line height, box sizing, and sets font properties */
* {
  margin: 0;
  line-height: 2;
  box-sizing: border-box;
  font-family: "UI Monospace", monospace;
  font-size: 1.2rem;
}

/* The article acts as the scroll container, setting its height and enabling scrolling */
article {
  height: 100vh;
  overflow-y: scroll;
  /* Sets the scroll snapping axis to vertical (y) and the behavior to mandatory */
  scroll-snap-type: y mandatory;
}

/* Each section within the article is a scroll snap point */
article > section {
  height: 100vh;
  display: flex;
  background: #eee;
  /* Aligns the snap position to the start on the x-axis */
  scroll-snap-align: start;
  /* Ensures scrolling always stops at this snap point */
  scroll-snap-stop: always;
}

/* Changes background color for odd and even sections for better visibility */
article > section:nth-child(odd) {
  background: #fbbf24;
}
article > section:nth-child(even) {
  background: #cd3333;
  color: #fefbee;
}

/* Centers the content within each section */
article > section > div {
  margin: auto;
  text-align: center;
}

/* Increases the font size of the headings */
h2 {
  font-size: 3rem;
}

The CSS in our example sets the scroll-snap-type to y mandatory, which configures the scrolling behavior within the <article> container. This property mandates that scrolling will snap along the y-axis at scroll snap points, which are defined by the scroll-snap-align property. Each <section> element within the <article> serves as one of these snap points.

The scroll-snap-align: start; rule applied to each <section> sets the snap point to be at the start of each section. With scroll-snap-stop: always;, scrolling is forced to stop at the start of each section, even if the user scrolls rapidly.

In any practical implementation, several factors should be considered. Notably, the decision between mandatory and proximity snapping behaviors can dramatically influence the user experience. The proximity setting often provides a smoother experience due to its inherent flexibility. Moreover, it's important to anticipate and plan for variations in content size and layout across diverse screen sizes, ensuring an adaptable and responsive design.

Values

The scroll-snap-type property accepts the following values:

Value	Description
`none`	No snapping occurs when the visual viewport of the scroll container is scrolled.
`x`	Snapping occurs only along the horizontal axis.
`y`	Snapping occurs only along the vertical axis.
`block`	Snapping occurs only along the block direction of the scroll container
`inline`	Snapping occurs only along the inline direction of the scroll container
`both`	Snapping can occur independently along both axes of the scroll container.
`mandatory`	If applied to a scroll container, the container is obliged to snap to a position when no active scrolling actions are taking place. At the end of a scroll, it will snap to a valid position if one exists.
`proximity`	If applied to a scroll container, the container may snap to a position at the end of a scroll, based on the user agent's evaluation of the scroll parameters.

Associated Properties

scroll-snap-align
scroll-snap-stop
scroll-padding
scroll-margin

Tips and Tricks

While mandatory snapping guarantees alignment with snap points, it might feel restrictive to users. In some cases, proximity snapping can provide a more fluid and responsive feel.
In responsive designs, you might want to enable or adjust scroll snapping depending on the viewport size. Media queries allow you to do this.
For dynamic content or complex layouts, you might need more control over scroll snapping. This can be achieved with JavaScript, allowing you to set or modify scroll snap points based on user interaction or other factors.
The scroll-snap-type property is part of a larger module. Other properties like scroll-padding, scroll-margin, and scroll-snap-align can be used in combination to control the alignment and spacing of snap points, providing a finer level of control over scroll-snapping behavior.

Browser Compatibility

For a detailed breakdown of support for respective values in different browsers, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	Yes*

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.