Tailwind CSS Scroll Snap Type

The scroll-snap-type utility class in Tailwind CSS allows you to control the behavior of the scrolling mechanism in your web page. This utility class applies the CSS property scroll-snap-type to an HTML element to define scroll snapping behavior within a container.

Syntax

The scroll-snap-type utility class follows the syntax:

<div class="scroll-snap-type-{value}"></div>

where {value} can be one of the following:

• none
• x mandatory
• x proximity
• y mandatory
• y proximity

Example

<div class="scroll-snap-type-x mandatory">
  // child elements with horizontal scroll go here
</div>

Output

The above example will produce a horizontal scrolling container with scroll snapping enabled at every paging interval.

Explanation

The scroll-snap-type property determines how a scroll container should snap to an element within it when scrolling stops. It is used to define the scroll snapping behavior, such as directional scrolling and snapping interval.

• none: No snap points are defined, and scrolling is traditional.
• x mandatory: paginated scrolling, where scrolling horizontally pulls the container one horizontal page at a time.
• x proximity: snapping behavior is similar to x mandatory, except that it snaps to the closest snap point rather than paging intervals.
• y mandatory: paginated scroll, where scrolling vertically pulls the container one vertical page at a time.
• y proximity: snapping behavior is similar to y mandatory, except that it snaps to the closest snap point rather than paging intervals.

Use

The scroll-snap-type utility class is primarily used to make elements snap in scroll containers, such as sliders, carousels, and tabs.

Important Points

• The scroll-snap-type utility class is applied to the container element of the scrollable content.
• It is not recommended to use both horizontal and vertical scroll snap behavior together in a single container as they produce unexpected behaviors.

Summary

The scroll-snap-type utility class in Tailwind CSS provides an easy way to apply scroll snap behavior to your web page. When assigned to an element in a scroll container, it controls the behavior of the scrolling mechanism. It is an essential tool in making elements snap in scroll containers such as sliders, tabs, and carousels.