CSS Scroll Snap: Effortlessly Create Smooth Scrolling Interfaces

This excerpt from Tiffany's CSS Master, 2nd Edition, explores the CSS Scroll Snap Module, a powerful tool for building modern, app-like web experiences. Scroll snap allows precise control over scrolling behavior, eliminating the need for JavaScript in many cases.

The CSS Scroll Snap Module has evolved. Older versions (Scroll Snap Points), implemented in browsers like older versions of Edge, Internet Explorer, and Firefox, used a pixel-based approach. However, modern browsers (Chrome 69 , Safari 11 ) utilize a box alignment model, which is the focus here. Beware of outdated tutorials mentioning "points" or using scroll-snap-points-x or scroll-snap-points-y properties.

Let's build a simple slideshow to illustrate. The HTML is remarkably straightforward:

<div>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img></div>

No extra wrappers or JavaScript are needed! The CSS does the heavy lifting:

* {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Scroll axis and behavior */
  overflow-x: auto;              /* 'scroll' or 'auto' */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

scroll-snap-type: x mandatory defines horizontal scrolling with mandatory snapping. display: flex arranges images horizontally. scroll-snap-align: center centers each image in the viewport.

For a deeper dive, consult Google Web Fundamentals' guide, "Well-Controlled Scrolling with CSS Scroll Snap."

Frequently Asked Questions

• What is CSS Scroll Snap? CSS Scroll Snap creates smooth, controlled scrolling, ideal for carousels or paged interfaces. It manages scroll positions, snapping the view to specific points.

• How does it differ from regular scrolling? Regular scrolling is free-flowing; Scroll Snap provides defined stopping points for a more predictable user experience.

• How do I implement it? Use scroll-snap-type on the container (e.g., x mandatory, y mandatory, or both mandatory) and scroll-snap-align (e.g., start, end, center) on the child elements.

• scroll-snap-type values? x, y, or both specify the axis; mandatory or proximity control snap strictness.

• Browser support? Widely supported by modern browsers, but check for updates.

• Common use cases? Image carousels, paged layouts, sectioned content.

• Controlling scroll speed? Not directly, but indirectly by adjusting the distance between snap points.

• Debugging? Use browser developer tools (e.g., Chrome's Scroll Snap Highlighter).

• Mobile support? Yes, fully functional on mobile devices.

The above is the detailed content of Scroll Snap in CSS: Controlling Scroll Action. For more information, please follow other related articles on the PHP Chinese website!