Prevent unintended scrolling with options like auto, contain, and none.
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:
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 theoverscroll-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 asinherit
if the property is inherited, or asinitial
if the property is not inherited.
Formal Definition
Initial value | auto |
---|---|
Applies to | Non-replaced block-level elements and non-replaced inline-block elements |
Inherited | No |
Computed value | As specified |
Animation type | Discrete |
Formal Syntax
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.
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.
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.
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
).
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
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.