CSS overscroll-behavior-y Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The overscroll-behavior-y property in CSS is used to control the behavior of a scrolling container when the scroll position reaches the edge of the content along the vertical axis.

This property is particularly useful for preventing the default "bounce" or "pull-to-refresh" behavior on touch devices or when working with nested scrollable elements. By setting this property, developers can enhance the user experience by providing a more controlled and consistent scrolling behavior.

💡 Syntax

The syntax for the overscroll-behavior-y property is straightforward and can be applied to any scrollable container.

Syntax

Copied

element {
  overscroll-behavior-y: value;
}

🎛️ Default Value

The default value of the overscroll-behavior-y property is auto. This means the default scroll behavior of the browser will occur when the scroll reaches the edge of the content.

🏠 Property Values

Value	Description
auto	The default behavior of the browser is maintained. Scroll events are propagated normally.
contain	The scroll behavior is contained within the element. The element does not allow scrolling beyond the boundaries, and the default bounce or pull-to-refresh behavior is disabled.
none	All scroll overflow effects are disabled. The element does not allow any scroll chaining or scroll overflow effects.

📄 Example

In this example, we prevent the vertical scroll overflow behavior on a container 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-y Example</title>
  <style>
    .scroll-container {
      width: 300px;
      height: 200px;
      overflow: auto;
      border: 1px solid #ccc;
      overscroll-behavior-y: contain;
    }
    .content {
      height: 400px;
      background: linear-gradient(#e66465, #9198e5);
    }
  </style>
</head>
<body>
  <h1>Overscroll Behavior Y Example</h1>
  <div class="scroll-container">
    <div class="content"></div>
  </div>
</body>
</html>

In this example, the .scroll-container has a fixed height with overflow enabled. The overscroll-behavior-y: contain; property ensures that the user cannot scroll beyond the top or bottom of the container, preventing the default bounce effect.

🖥️ Browser Compatibility

The overscroll-behavior-y property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Edge, and Opera. Safari does not fully support this property, so testing across different browsers is recommended for consistent behavior.

🎉 Conclusion

The overscroll-behavior-y property provides developers with greater control over the scrolling behavior of web pages and applications.

By using this property, you can create a smoother and more predictable scrolling experience, especially on touch devices. Experiment with the different values to see how they affect your layout and user interactions.