Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS overscroll-behavior-block Property

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

Photo Credit to CodeToFun

🙋 Introduction

The overscroll-behavior-block property in CSS controls the behavior of the browser when the user scrolls to the edge of a block-level element.

It allows developers to define what happens when a user attempts to scroll beyond the boundaries of an element, providing a way to manage the default "bounce" or "scroll chaining" behavior seen in many browsers and devices.

This property is particularly useful for improving user experience in scrollable areas and preventing undesired scrolling interactions.

💡 Syntax

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

Syntax
Copied
Copy To Clipboard
element {
  overscroll-behavior-block: value;
}

🎛️ Default Value

The default value of the overscroll-behavior-block property is auto, which allows the default overscroll behavior, such as scrolling or bounce effects, to occur.

🏠 Property Values

ValueDescription
autoThe default behavior; allows the browser's default scroll chaining and overscroll behaviors.
containPrevents scroll chaining by containing the scroll within the element. It stops the propagation of the scroll to parent elements.
noneDisables overscroll behavior and prevents scroll chaining. This setting can help prevent the user from inadvertently triggering actions like page refresh on mobile browsers when overscrolling.

📄 Example

In this example, we demonstrate how to use the overscroll-behavior-block property to contain the scrolling behavior within an element.

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-block Example</title>
  <style>
    .scrollable {
      width: 300px;
      height: 150px;
      overflow: auto;
      border: 1px solid #ccc;
      overscroll-behavior-block: contain;
    }
  </style>
</head>
<body>
  <h1>Scrollable Container with Contained Overscroll</h1>
  <div class="scrollable">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. </p>
    <p>Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The overscroll-behavior-block property is supported in most modern browsers. However, for the best user experience, it's recommended to test this property across different browsers and devices to ensure consistent behavior.

🎉 Conclusion

The overscroll-behavior-block property provides a useful way to manage scrolling behavior within block-level elements.

By controlling overscroll actions, developers can create smoother and more controlled user experiences, especially in scrollable containers. This property is particularly valuable for preventing unintended interactions like overscroll bounce effects or unwanted scrolling in parent containers. Experiment with different values to find the best solution for your web design needs.

👨‍💻 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