CSS overscroll-behavior-y Control Vertical Scroll Behavior

Introduction

The overscroll-behavior-y CSS property controls how a browser behaves when you reach the vertical boundary of a scrollable area. This is especially useful for websites with multiple scrollable sections, helping you manage how scrolling in one area affects others or the entire page. By setting this property, you can prevent or enable scroll chaining, which is when scrolling in one area causes adjacent areas or the entire page to scroll.

This property is great for web developers and designers aiming to create a smooth and controlled user experience, especially on mobile devices where scrolling behavior can greatly impact usability. Understanding and using the overscroll-behavior-y property can optimize your web design and enhance the overall user experience.

Specification

The overscroll-behavior-y CSS property is defined in the CSS Overscroll Behavior Module Level 1 specification. This module helps you control the behavior of scrolling areas when you reach the vertical boundary. The specification introduces the overscroll-behavior-y property to address common issues related to scroll chaining and overflow effects, making it easier for web developers to manage the scrolling behavior of their web pages.

This property is part of the broader CSS Overscroll Behavior module, which includes other properties like overscroll-behavior, overscroll-behavior-x, overscroll-behavior-inline, and overscroll-behavior-block. By following this specification, developers can ensure consistent and predictable scrolling behavior across different browsers and devices.

You can find the CSS Overscroll Behavior Module Level 1 specification here. This document provides detailed information on the syntax, values, and expected behavior of the overscroll-behavior-y property, helping developers implement it effectively in their projects.

Description

The overscroll-behavior-y CSS property defines how a browser behaves when you reach the vertical boundary of a scrollable area. This property is crucial for managing the user experience, especially in web designs with multiple scrollable sections. By setting the overscroll-behavior-y property, you can control whether scrolling in one area causes adjacent areas or the entire page to scroll, a behavior known as scroll chaining.

This property allows web developers to fine-tune the scrolling behavior of their web pages, ensuring a smooth and controlled user experience. It is particularly useful for preventing issues such as unintended scrolling of underlying elements or the entire page when users reach the end of a scrollable area.

Understanding and using the overscroll-behavior-y property enables developers to create more intuitive and user-friendly web designs, optimizing the user experience across various devices and browsers.

Syntax

The overscroll-behavior-y property can be set using specific keywords. Here is the basic syntax for applying this property:

/* Keyword values */
overscroll-behavior-y: auto; /* default */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

/* Global values */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;

Values

The overscroll-behavior-y property accepts the following values:

• auto: This is the default value. The normal scroll overflow behavior occurs, allowing scroll chaining to adjacent scrollable areas or the entire page.
• contain: The default scroll overflow behavior is observed within the element where this value is set. However, no scroll chaining occurs to neighboring scrolling areas; underlying elements will not scroll. This value disables native browser navigation, including vertical pull-to-refresh gestures and horizontal swipe navigation.
• none: No scroll chaining occurs to neighboring scrolling areas, and the default scroll overflow behavior is prevented.
• inherit: The element inherits the overscroll-behavior-y value from its parent.
• initial: Sets the property to its initial value (auto).
• revert: Reverts the property to the value specified in the user agent’s default stylesheet.
• revert-layer: Reverts the property to the value specified in the user agent’s default stylesheet for the cascade layer it belongs to.
• unset: Acts as inherit if the property is inherited, or as initial if the property is not inherited.

Formal Definition

Formal Syntax

overscroll-behavior-y =
  contain |
  none    |
  auto

Examples

Preventing an Underlying Element from Scrolling Vertically

In this example, the overscroll-behavior-y property is set to contain to prevent the main content from scrolling when the vertical boundary of the .messages element is reached.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-y</title>
  <style>
    .messages {
      height: 220px;
      overflow: auto;
      overscroll-behavior-y: contain;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-y</b>
  <p>overscroll-behavior-y: contain</p>
  <div class="messages">
    <p>This is a scrollable area. When you reach the bottom, the main content will not scroll.</p>
    <p>Add more content here to see the effect.</p>
  </div>
</body>
</html>

Output: Scrolling down on the smaller element.

![contain]WebsiteUrl

Default Scrolling Behavior

In this example, the overscroll-behavior-y property is set to auto. This allows the default scrolling behavior, including scroll chaining to adjacent scrollable areas or the entire page.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-y</title>
  <style>
    .container {
      display: flex;
    }
    .main-content {
      width: 200px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-y: auto;
      height: 100px;
      width: 125px;
      margin: 25px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-y</b>
  <p>overscroll-behavior-y: auto</p>
  <div class="container">
    <div class="main-content">
      Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.<br><br>
      Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
    </div>
    <div class="smaller-box">
      This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached.
    </div>
  </div>
</body>
</html>

Output: Scrolling down on the smaller element.

![auto]WebsiteUrl

Preventing All Scroll Chaining

In this example, the overscroll-behavior-y property is set to none. This prevents any scroll chaining and the default overflow behavior.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-y</title>
  <style>
    .container {
      display: flex;
    }
    .main-content {
      width: 200px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-y: none;
      height: 100px;
      width: 125px;
      margin: 25px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-y</b>
  <p>overscroll-behavior-y: none</p>
  <div class="container">
    <div class="main-content">
      Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.<br><br>
      Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
    </div>
    <div class="smaller-box">
      This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached.
    </div>
  </div>
</body>
</html>

Output: Scrolling down on the smaller element.

![none]WebsiteUrl

Using Initial Value

In this example, the overscroll-behavior-y property is set to initial. This resets the property to its default value (auto).

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-y</title>
  <style>
    .container {
      display: flex;
    }
    .main-content {
      width: 200px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-y: initial;
      height: 100px;
      width: 125px;
      margin: 25px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-y</b>
  <p>overscroll-behavior-y: initial</p>
  <div class="container">
    <div class="main-content">
      Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.<br><br>
      Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
    </div>
    <div class="smaller-box">
      This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached.
    </div>
  </div>
</body>
</html>

Output: Scrolling down on the smaller element.

![initial]WebsiteUrl

Specifications

The overscroll-behavior-y property is defined in the CSS Overscroll Behavior Module Level 1 specification. This module provides detailed information on the behavior and implementation of overscroll properties, helping developers create more intuitive and user-friendly web designs.

Browser Compatibility

The overscroll-behavior-y property is supported by most modern browsers. Ensure that JavaScript is enabled to view detailed compatibility information.

See Also

• Take control of your scroll: customizing pull-to-refresh and overflow effects
• Related properties: overscroll-behavior-inline, overscroll-behavior-block