Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS overscroll-behavior-inline Property

Posted in CSS Tutorial
Updated on Jul 25, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
CSS overscroll-behavior-inline Property

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
Copy To Clipboard
element {
  overscroll-behavior-inline: value;
}

🎛️ Default Value

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

🏠 Property Values

ValueDescription
autoThe default value. The user can scroll past the boundary, and the browser may show an overscroll effect.
containThe scrolling behavior is contained within the element. No boundary scroll chaining occurs to parent elements, and the browser does not display an overscroll effect.
noneSimilar 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy