Tillitsdone
down Scroll to discover
CSS overscroll-behavior-y Control Vertical Scroll Behavior
Learn how to use the css overscroll-behavior-y property to control vertical scrolling behavior.

Prevent unintended scrolling with options like auto, contain, and none.
thumbnail

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

Initial valueauto
Applies toNon-replaced block-level elements and non-replaced inline-block elements
InheritedNo
Computed valueAs specified
Animation typeDiscrete

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

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.