CSS scroll-snap-stop Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-snap-stop property in CSS is used in conjunction with the scroll-snap-type and scroll-snap-align properties to create a smooth and controlled scrolling experience.

This property allows you to specify whether a scroll container should forcefully snap to a snap position even if the user is scrolling quickly.

💡 Syntax

The syntax for the scroll-snap-stop property is simple. It can be applied to any scroll container element.

Syntax

Copied

element {
  scroll-snap-stop: value;
}

🎛️ Default Value

The default value of the scroll-snap-stop property is normal, which means the snapping behavior follows the normal rules without any additional constraints.

🏠 Property Values

Value	Description
normal	Default value. Snapping behaves normally, without forcing the snap position during fast scrolling.
always	Forces the scroll container to snap to this position even if the user is scrolling quickly.

📄 Example

In this example, we'll create a horizontal scrolling container with snap points and demonstrate the effect of the scroll-snap-stop property.

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-stop Example</title>
  <style>
    .scroll-container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      width: 100%;
      height: 200px;
    }
    .item {
      flex: 0 0 100%;
      scroll-snap-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      color: white;
    }
    .item1 { background-color: #ff5733; scroll-snap-stop: always; }
    .item2 { background-color: #33c1ff; }
    .item3 { background-color: #33ff57; }
  </style>
</head>
<body>
  <h1>Scroll Snap Stop Example</h1>
  <div class="scroll-container">
    <div class="item item1">Item 1 (always)</div>
    <div class="item item2">Item 2 (normal)</div>
    <div class="item item3">Item 3 (normal)</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-snap-stop 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-stop property is a useful addition to the CSS scroll snapping specification, providing developers with more control over the scrolling behavior.

By using this property, you can enhance the user experience on your website, especially for touch and swipe interactions. Experiment with different values and see how this property can improve the scrolling experience in your web projects.