“`

Mastering CSS Scroll Snapping: A Step-by-Step Guide

Getting Started with CSS Scroll Snapping

CSS scroll snapping is a powerful feature that allows you to create smooth and intuitive scrolling experiences. With the latest updates, it’s now easier than ever to implement scroll snapping using only CSS.

Before we begin, let’s take a look at what we’ll be building. Our example will feature five snap points with content that can be snapped to.

The HTML Structure

To start, we need to create a container element that will hold our snap points. We’ll use the following HTML structure:

<div class="scroll-container">
  <div class="snap-point">Snap Point 1</div>
  <div class="snap-point">Snap Point 2</div>
  <div class="snap-point">Snap Point 3</div>
  <div class="snap-point">Snap Point 4</div>
  <div class="snap-point">Snap Point 5</div>
</div>

The Scroll Snap Container

To enable scroll snapping, we need to add the scroll-snap-type property to our container element. This property specifies how the scroll snapping should behave.

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

In this example, we’re using the y axis and setting the mandatory value, which means that the scroll will always snap to the nearest snap point.

Declaring Snap Points

To declare snap points, we need to add the scroll-snap-align property to our snap point elements.

.snap-point {
  height: 100vh;
  scroll-snap-align: start;
}

In this example, we’re setting the start value, which means that the snap point will be aligned to the top of the container.

Styling the Current Snap Target

One of the most exciting features of CSS scroll snapping is the ability to style the current snap target. We can use the :snapped pseudo-selector to achieve this.

.snap-point:snapped {
  background-color: #333;
  color: #fff;
}

Unfortunately, the :snapped pseudo-selector is not yet supported by all browsers. However, we can use the Intersection Observer API as a fallback solution.

Alternative Method using JavaScript

To use the Intersection Observer API, we need to create an observer that will watch for our snap points and add a class when they come into view.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    } else {
      entry.target.classList.remove('active');
    }
  });
}, { threshold: 1 });

const snapPoints = document.querySelectorAll('.snap-point');

snapPoints.forEach((snapPoint) => {
  observer.observe(snapPoint);
});

In this example, we’re creating an observer that will watch for our snap points and add the active class when they come into view.

“`