CSS overscroll-behavior-block Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

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

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

Value	Description
auto	The default behavior; allows the browser's default scroll chaining and overscroll behaviors.
contain	Prevents scroll chaining by containing the scroll within the element. It stops the propagation of the scroll to parent elements.
none	Disables 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

<!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.