CSS scroll-snap-align Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-snap-align property in CSS is part of the CSS Scroll Snap Module, which allows web developers to create smooth and predictable scrolling experiences. This property specifies how a snap point aligns with the scroll container's snap port when scrolling ends.

By using this property, you can control the alignment of elements within a scroll container to create a more engaging and user-friendly interface.

💡 Syntax

The syntax for the scroll-snap-align property is as follows:

Syntax

Copied

element {
  scroll-snap-align: value;
}

🎛️ Default Value

The default value of the scroll-snap-align property is none, meaning no snapping behavior is applied.

🏠 Property Values

Value	Description
none	No snapping alignment is applied.
start	The element aligns with the start edge of the scroll container.
center	The element aligns with the center of the scroll container.
end	The element aligns with the end edge of the scroll container.

📄 Example

In this example, we'll create a horizontal scrolling container where each item snaps to the start of the container when scrolling ends.

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-align Example</title>
  <style>
    .scroll-container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }
    .scroll-item {
      scroll-snap-align: start;
      flex: 0 0 auto;
      width: 200px;
      height: 200px;
      margin-right: 10px;
      background-color: lightblue;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Horizontal Scroll Snap Example</h1>
  <div class="scroll-container">
    <div class="scroll-item">1</div>
    <div class="scroll-item">2</div>
    <div class="scroll-item">3</div>
    <div class="scroll-item">4</div>
    <div class="scroll-item">5</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

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

🎉 Conclusion

The scroll-snap-align property is a powerful tool for web developers looking to create smooth and user-friendly scrolling experiences.

By controlling the alignment of snap points within a scroll container, you can enhance the navigation and usability of your web projects. Experiment with different values to see how this property can improve the scrolling behavior of your website.