rick@tillitsdone.com

+66824564755

Scroll to discover

CSS overscroll-behavior-x Control Horizontal Scroll

The CSS overscroll-behavior-x property controls horizontal scrolling behavior.

Use it to prevent unwanted scroll chaining and ensure a smoother user experience.

Options include 'auto', 'contain', and 'none'.

Introduction

The overscroll-behavior-x CSS property controls how a browser handles horizontal scroll boundaries in a scrolling area. This is especially useful in web development to manage multiple scrolling areas and ensure they interact smoothly without unintended page scrolling.

Specification

The overscroll-behavior-x property is defined in the CSS Overscroll Behavior Module Level 1. This module ensures consistent behavior across browsers, making it easier to create predictable scrolling experiences.

Description

The overscroll-behavior-x CSS property helps manage how a scrolling area behaves when it reaches its horizontal boundary. By default, reaching the scroll boundary can cause the entire page to scroll, which can be disruptive in designs with multiple scrolling areas. This property offers a way to prevent this unwanted behavior, enhancing user experience and creating more controlled scrolling interactions.

Syntax

Using the overscroll-behavior-x property is straightforward. Here’s an example of how to use it in CSS:

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

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

The property accepts keyword values (auto, contain, none) and global values (inherit, initial, revert, revert-layer, unset).

Values

The overscroll-behavior-x property can take several values that control the scrolling behavior:

auto: Default behavior, allowing the entire page to scroll when the boundary is reached.
contain: Stops scroll chaining to neighboring areas but allows default scroll overflow behavior within the element.
none: Prevents any scroll chaining and stops default scroll overflow behavior.
inherit: Inherits the value from the parent element.
initial: Sets the property to its initial value (auto).
revert: Resets to the inherited value if it inherits, or to the initial value if not.
revert-layer: Resets to the inherited value if it inherits, or to the initial value if not, considering the cascade layer.
unset: Resets to the natural value, either inherited or initial.

Formal Definition

The overscroll-behavior-x property is formally defined with the following characteristics:

Property	Value
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

The formal syntax for the overscroll-behavior-x property:

overscroll-behavior-x = contain | none | auto

Examples

Preventing an Underlying Element from Scrolling Horizontally

In this example, there are two block-level boxes, one inside the other. The outer box has a large width, causing the page to scroll horizontally. The inner box has a small width but large content width, allowing it to scroll horizontally.

By default, reaching the inner box’s scroll boundary can cause the whole page to scroll. To prevent this, set overscroll-behavior-x: contain on the inner box:

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

Example: `overscroll-behavior-x: auto`

This is the default behavior. When the inner element’s scroll boundary is reached, the entire page will start scrolling.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-x</title>
  <style>
    .main-content {
      height: 50px;
      width: 1000px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-x: auto;
      height: 250px;
      width: 300px;
      overflow-x: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-x</b>
  <p>overscroll-behavior-x: auto</p>
  <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.
  </div>
  <div class="smaller-box">
    <img src="WebsiteUrl">
  </div>
</body>
</html>

Output: Scrolling horizontally on the smaller element will cause the entire page to scroll.

Example: `overscroll-behavior-x: contain`

This prevents the underlying elements from scrolling when the inner element’s scroll boundary is reached.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-x</title>
  <style>
    .main-content {
      height: 50px;
      width: 1000px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-x: contain;
      height: 250px;
      width: 300px;
      overflow-x: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-x</b>
  <p>overscroll-behavior-x: contain</p>
  <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.
  </div>
  <div class="smaller-box">
    <img src="WebsiteUrl">
  </div>
</body>
</html>

Output: Scrolling horizontally on the smaller element will not cause the entire page to scroll.

Example: `overscroll-behavior-x: none`

This completely prevents any scroll chaining and default scroll overflow behavior.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-x</title>
  <style>
    .main-content {
      height: 50px;
      width: 1000px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-x: none;
      height: 250px;
      width: 300px;
      overflow-x: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-x</b>
  <p>overscroll-behavior-x: none</p>
  <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.
  </div>
  <div class="smaller-box">
    <img src="WebsiteUrl">
  </div>
</body>
</html>

Output: Scrolling horizontally on the smaller element will not affect the entire page.

Example: `overscroll-behavior-x: initial`

This sets the property to its initial value, which is auto.

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior-x</title>
  <style>
    .main-content {
      height: 50px;
      width: 1000px;
      background-color: lightgreen;
    }
    .smaller-box {
      overscroll-behavior-x: initial;
      height: 250px;
      width: 300px;
      overflow-x: scroll;
    }
  </style>
</head>
<body>
  <h1 style="color: green">Website</h1>
  <b>CSS | overscroll-behavior-x</b>
  <p>overscroll-behavior-x: initial</p>
  <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.
  </div>
  <div class="smaller-box">
    <img src="WebsiteUrl">
  </div>
</body>
</html>

Output: Scrolling horizontally on the smaller element will cause the entire page to scroll, as it resets to the default behavior.

Specifications

The overscroll-behavior-x property is defined in the CSS Overscroll Behavior Module Level 1 specification.

Specification
[CSS Overscroll Behavior Module Level 1]WebsiteUrl

Browser Compatibility

The following table provides information about browser compatibility for the overscroll-behavior-x property:

Browser	Version
Chrome	63.0
Firefox	59.0
Opera	50.0

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.