CSS scroll-snap-type Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-snap-type property in CSS is a powerful feature that allows developers to create smooth, scroll-snapping behavior for containers with overflow content.

This property is particularly useful for creating carousels, galleries, or any interface where precise control over scroll positions is desired. With scroll-snap-type, you can control the snapping behavior along the horizontal, vertical, or both axes.

💡 Syntax

The syntax for the scroll-snap-type property is straightforward and can be applied to any scroll container.

Syntax

Copied

element {
  scroll-snap-type: axis snap-strictness;
}

axis: Specifies the axis along which snapping occurs. Possible values are x, y, or both.
snap-strictness: Specifies the strictness of the snapping behavior. Possible values are mandatory or proximity.

🎛️ Default Value

The default value of the scroll-snap-type property is none, which means that no snapping will occur.

🏠 Property Values

Value	Description
none	No snapping will occur.
x	Snapping occurs along the horizontal axis.
y	Snapping occurs along the vertical axis.
both	Snapping occurs along both the horizontal and vertical axes.
mandatory	The scroll container must snap to the defined points.
proximity	The scroll container will snap to the defined points if the scrolling is near them.

📄 Example

In this example, we'll create a horizontal scroll container that snaps to each child element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS scroll-snap-type Example</title>
  <style>
    .scroll-container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      width: 100%;
    }
    .scroll-item {
      flex: none;
      scroll-snap-align: start;
      width: 100%;
      height: 200px;
      background-color: #f5a623;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Horizontal Scroll Snap</h1>
  <div class="scroll-container">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
    <div class="scroll-item">Item 4</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-snap-type property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The scroll-snap-type property is a valuable tool for web developers looking to create intuitive and user-friendly scrolling experiences.

By controlling the snapping behavior of scroll containers, you can enhance the navigational flow of your website. Experiment with different configurations to see how this property can improve the usability and aesthetics of your web projects.