CSS overscroll-behavior-inline Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The overscroll-behavior-inline property in CSS is used to control the behavior when a user scrolls to the edge of an element's content in the inline axis (typically left-right in horizontal writing modes).

This property is useful for managing the behavior when users scroll past the bounds of a scrollable area, such as preventing overscroll effects like bouncing or panning.

💡 Syntax

The syntax for the overscroll-behavior-inline property is as follows:

Syntax

Copied

element {
  overscroll-behavior-inline: value;
}

🎛️ Default Value

The default value of the overscroll-behavior-inline property is auto.

🏠 Property Values

Value	Description
auto	The default value. The user can scroll past the boundary, and the browser may show an overscroll effect.
contain	The scrolling behavior is contained within the element. No boundary scroll chaining occurs to parent elements, and the browser does not display an overscroll effect.
none	Similar to contain, but also prevents any scrolling from propagating to parent elements.

📄 Example

In this example, we'll use the overscroll-behavior-inline property to prevent overscroll effects when reaching the end of a horizontally scrollable container.

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 overscroll-behavior-inline Example</title>
  <style>
    .scroll-container {
      width: 300px;
      overflow-x: auto;
      border: 1px solid #ccc;
      overscroll-behavior-inline: contain;
    }

    .content {
      width: 600px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Overscroll Behavior Inline Example</h1>
  <div class="scroll-container">
    <div class="content">
      This is a horizontally scrollable container. Scroll to see the overscroll behavior in action.
    </div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The overscroll-behavior-inline property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is important to test your implementation across different browsers to ensure consistent behavior.

🎉 Conclusion

The overscroll-behavior-inline property provides developers with a way to control the scrolling behavior at the edges of a container along the inline axis. This can be particularly useful for creating a seamless user experience by preventing unwanted overscroll effects or controlling the propagation of scrolling events.

Use this property to fine-tune the scrolling behavior on your web pages and ensure a smooth browsing experience for your users.