CSS overscroll-behavior Controlling Scroll Effects

Introduction

The overscroll-behavior property in CSS is a handy tool for web developers and designers. It helps control what happens when a user reaches the end of a scrolling area. This property is great for preventing unwanted behaviors like scroll chaining and default scroll overflow effects, such as the “bounce” effect on mobile devices.

By default, when users scroll to the top or bottom of a page or other scrolling areas, mobile browsers often show a “bounce” effect or even refresh the page. Also, when scrolling within a dialog box or a smaller scrollable area, reaching the boundary can cause the underlying page to start scrolling. This is called scroll chaining and can be annoying.

The overscroll-behavior property lets you control these behaviors, ensuring a smoother and more predictable user experience. In the following sections, we’ll explore the constituent properties, syntax, values, and practical examples of overscroll-behavior, along with its specifications and browser compatibility. By the end, you’ll have a solid understanding of how to use this CSS property effectively in your web projects.

Constituent Properties

The overscroll-behavior property in CSS is a shorthand for two other properties:

• overscroll-behavior-x: Controls the overscroll behavior on the horizontal (x) axis.
• overscroll-behavior-y: Controls the overscroll behavior on the vertical (y) axis.

These properties are useful for fine-tuning the overscroll behavior in both horizontal and vertical directions. For example, you might want to disable the “bounce” effect on mobile devices when scrolling horizontally but allow it when scrolling vertically.

Syntax

The overscroll-behavior property in CSS is specified using one or two keywords from a set of predefined values. These keywords dictate how the browser should handle overscroll behavior on the x and y axes.

Here is the basic syntax for the overscroll-behavior property:

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

/* Two values */
overscroll-behavior: auto contain;

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

Explanation

• One Value: If a single value is specified, it applies to both the x and y axes.
• Two Values: If two values are specified, the first value applies to the x-axis (overscroll-behavior-x), and the second value applies to the y-axis (overscroll-behavior-y).

Example

/* Single value applied to both axes */
.example-container {
  overscroll-behavior: contain;
}

/* Different values for x and y axes */
.example-container {
  overscroll-behavior: auto contain;
}

Values

The overscroll-behavior property in CSS can take several values, each defining how the browser should handle overscroll behavior. Here are the key values and their meanings:

auto

The auto value is the default behavior. It allows the default scroll overflow behavior to occur as usual. This means that when you reach the boundary of a scrolling area, the browser will perform its default action, which may include scroll chaining to neighboring scrolling areas or triggering the “bounce” effect on mobile devices.

overscroll-behavior: auto;

contain

The contain value ensures that the default scroll overflow behavior (e.g., “bounce” effects) is observed only within the element where this value is set. No scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. This value also disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

overscroll-behavior: contain;

none

The none value prevents any scroll chaining to neighboring scrolling areas and also stops the default scroll overflow behavior. This is useful for completely disabling overscroll effects, ensuring that the user experience remains smooth and predictable.

overscroll-behavior: none;

Global Values

In addition to the specific values mentioned above, the overscroll-behavior property can also take global CSS values:

• inherit: The element inherits the overscroll behavior from its parent element.
• initial: The property is set to its default value, which is auto.
• revert: The property is set to the browser’s default value, which is auto.
• revert-layer: The property is set to the value specified by the nearest ancestor with a different cascade layer.
• unset: The property is reset to its natural value, which means it behaves as if it had not been set at all.

overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: revert;
overscroll-behavior: revert-layer;
overscroll-behavior: unset;

Example

Here’s an example of how to use the contain value to prevent scroll chaining and the “bounce” effect within a specific element:

.scrollable-area {
  overscroll-behavior: contain;
}

Description

By default, mobile browsers often introduce a “bounce” effect or even a page refresh when users reach the top or bottom of a page or other scrolling areas. Additionally, when scrolling within a dialog box or a smaller scrollable area, reaching the boundary can cause the underlying page to start scrolling. This behavior, known as scroll chaining, can be disruptive and unwanted in many web designs.

The overscroll-behavior property in CSS is designed to address these issues. It allows web developers to control what happens when a user reaches the boundary of a scrolling area, helping to create a smoother and more predictable user experience.

How It Works

• Default Behavior: Without any specific settings, browsers tend to provide a “bounce” effect or trigger actions like page refreshes when scrolling boundaries are reached. This can be particularly noticeable on mobile devices.
• Scroll Chaining: When multiple scrollable areas are present, such as a dialog box within a scrollable page, reaching the boundary of one area can cause the underlying area to start scrolling. This is called scroll chaining and can be prevented using the overscroll-behavior property.

Benefits of Using overscroll-behavior

• Preventing Unwanted Scroll Chaining: By setting overscroll-behavior to contain or none, you can ensure that scrolling within one area does not affect other areas, providing a more controlled user experience.
• Disabling Native Browser Navigation: The contain value also disables native browser navigation features like the vertical pull-to-refresh gesture and horizontal swipe navigation, which can be useful for preventing accidental actions.
• Improving User Experience: By controlling overscroll behavior, you can eliminate disruptive effects like the “bounce” effect, making the scrolling experience smoother and more intuitive.

Applicability

The overscroll-behavior property applies only to non-replaced block-level elements and non-replaced inline-block elements. It is particularly useful for scroll containers, such as <div> elements with overflow properties set. It’s important to note that this property does not affect <iframe> elements, as they are not considered scroll containers. To control scroll chaining from an iframe, you need to set overscroll-behavior on both the <html> and <body> elements of the iframe’s document.

Formal Definition

The overscroll-behavior property in CSS is formally defined to control the behavior of a browser when a user reaches the boundary of a scrolling area. This property allows web developers to specify how the browser should handle overscroll events, such as the “bounce” effect or scroll chaining.

Initial Value

The initial value of the overscroll-behavior property is auto. This means that the default scroll overflow behavior occurs as usual, which may include the “bounce” effect on mobile devices or scroll chaining to neighboring scrolling areas.

Applies To

The overscroll-behavior property applies to non-replaced block-level elements and non-replaced inline-block elements. This includes scroll containers like <div> elements with overflow properties set.

Inherited

No, the overscroll-behavior property is not inherited. This means that each element must have its own overscroll behavior defined if you want to control it specifically for that element.

Computed Value

The computed value of the overscroll-behavior property is as specified for each of its constituent properties:

• overscroll-behavior-x: as specified
• overscroll-behavior-y: as specified

Animation Type

The animation type for the overscroll-behavior property is discrete. This means that the property does not animate smoothly between values but rather changes abruptly.

Formal Syntax

The formal syntax for the overscroll-behavior property is as follows:

overscroll-behavior =
  [ auto | contain | none ] {1,2}

Explanation

• The property can take one or two values from the list [ auto | contain | none ].
• If one value is specified, it applies to both the x and y axes.
• If two values are specified, the first value applies to the x-axis (overscroll-behavior-x), and the second value applies to the y-axis (overscroll-behavior-y).

Example

Here is an example of how to use the formal syntax in CSS:

/* Single value applied to both axes */
.example-container {
  overscroll-behavior: contain;
}

/* Different values for x and y axes */
.example-container {
  overscroll-behavior: auto contain;
}

Examples

Preventing an Underlying Element from Scrolling

In this example, we will demonstrate how to use the overscroll-behavior property to prevent an underlying element from scrolling when a dialog box reaches its scroll boundary. This is a common scenario where you have a dialog box with scrolling content on top of a scrollable page.

Preventing Overscroll Effects on the Entire Page

In this example, we will show how to use the overscroll-behavior property to prevent overscroll effects, such as the “bounce” effect, on the entire page. This is useful for creating a consistent scrolling experience across different devices.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior Example</title>
  <style>
    html {
      overscroll-behavior: none;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }
    .content {
      width: 300px;
      background-color: lightgray;
      padding: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h2>Scrollable Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- Repeat the paragraph as needed to create scrollable content -->
    </div>
  </div>
</body>
</html>

Explanation

• By setting overscroll-behavior: none; on the <html> element, we prevent any overscroll effects on the entire page.
• This ensures that when users reach the top or bottom of the page, there will be no “bounce” effect or page refresh, providing a smoother scrolling experience.

Controlling Overscroll Behavior on Specific Elements

In this example, we will demonstrate how to control overscroll behavior on specific elements within a page. This is useful for fine-tuning the scrolling experience for different parts of your web application.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior Example</title>
  <style>
    .dialog {
      width: 400px;
      height: 300px;
      overflow: auto;
      overscroll-behavior: contain;
      background-color: white;
      border: 1px solid black;
      padding: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .content {
      height: 600px;
      background-color: lightgray;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="dialog">
    <div class="content">
      <h2>Dialog Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- Repeat the paragraph as needed to create scrollable content -->
    </div>
  </div>
</body>
</html>

Explanation

• By setting overscroll-behavior: contain; on the .dialog element, we prevent scroll chaining and the “bounce” effect within the dialog box.
• This ensures that when users scroll within the dialog box and reach its boundary, the underlying page will not start scrolling, providing a more controlled user experience.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }
    .content {
      width: 300px;
      height: 200px;
      background-color: lightgray;
      overflow-y: scroll;
      margin-bottom: 20px;
    }
    .no-overscroll {
      overscroll-behavior: none;
    }
    .contain-overscroll {
      overscroll-behavior: contain;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content no-overscroll">
      <h2>No Overscroll Behavior</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- Repeat the paragraph as needed to create scrollable content -->
    </div>
    <div class="content contain-overscroll">
      <h2>Contain Overscroll Behavior</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- Repeat the paragraph as needed to create scrollable content -->
    </div>
  </div>
</body>
</html>

Explanation

• The .content class represents the scrollable areas within the page.
• The .no-overscroll class applies overscroll-behavior: none; to prevent any overscroll effects on the specific element.
• The .contain-overscroll class applies overscroll-behavior: contain; to restrict overscroll effects to the specific element, preventing scroll chaining to neighboring elements.

These examples demonstrate the versatility of the overscroll-behavior property in controlling scrolling behavior on both the entire page and specific elements. By using this property effectively, you can create a more controlled and predictable user experience in your web applications.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | overscroll-behavior Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
    }
    .main-content {
      width: 300px;
      height: 400px;
      overflow-y: scroll;
      background-color: lightgray;
      margin-bottom: 20px;
    }
    .dialog-box {
      width: 250px;
      height: 200px;
      background-color: white;
      border: 1px solid #ccc;
      overflow-y: scroll;
      overscroll-behavior-y: contain;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main-content">
      <!-- Main content goes here -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- Repeat the paragraph as needed to create scrollable content -->
    </div>
    <div class="dialog-box">
      <!-- Dialog box content goes here -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- Repeat the paragraph as needed to create scrollable content -->
    </div>
  </div>
</body>
</html>

Explanation

• The .main-content class represents the main scrollable area of the page.
• The .dialog-box class represents the dialog box with its own scrollable content.
• By setting overscroll-behavior-y: contain; on the .dialog-box, we ensure that when the dialog box reaches its scroll boundary, the underlying .main-content will not start scrolling.

Specifications

The overscroll-behavior property is part of the CSS Overscroll Behavior Module Level 1 specification. This module defines how browsers should handle overscroll behavior, providing web developers with control over what happens when a user reaches the boundary of a scrolling area.

Key Details

• Specification Document: [CSS Overscroll Behavior Module Level 1]WebsiteUrl
• Property Definition: The overscroll-behavior property is a shorthand for overscroll-behavior-x and overscroll-behavior-y, which control the overscroll behavior on the horizontal and vertical axes, respectively.

Purpose

The primary purpose of the overscroll-behavior property is to give web developers the ability to control and customize the overscroll behavior of scrolling areas. This includes preventing or containing overscroll effects like the “bounce” effect on mobile devices and preventing scroll chaining, where reaching the boundary of one scrolling area causes another scrolling area to start scrolling.

Constituent Properties

• overscroll-behavior-x: Controls the overscroll behavior on the horizontal (x) axis.
• overscroll-behavior-y: Controls the overscroll behavior on the vertical (y) axis.

Values

The overscroll-behavior property can take the following values:

• auto: The default behavior, allowing the browser’s default overscroll behavior, which may include the “bounce” effect or scroll chaining.
• contain: Contains the overscroll behavior within the element, preventing scroll chaining to neighboring scrolling areas.
• none: Prevents any overscroll behavior, including the “bounce” effect and scroll chaining.

Global Values

In addition to the specific values mentioned above, the overscroll-behavior property can also take global CSS values:

• inherit: Inherits the overscroll behavior from the parent element.
• initial: Sets the property to its default value, which is auto.
• revert: Sets the property to the browser’s default value, which is auto.
• revert-layer: Sets the property to the value specified by the nearest ancestor with a different cascade layer.
• unset: Resets the property to its natural value, as if it had not been set at all.

Browser Compatibility

The overscroll-behavior property is supported by the following browsers:

• Chrome: Version 63.0 and later
• Firefox: Version 59.0 and later
• Edge: Version 18.0 and later
• Opera: Version 50.0 and later

Practical Use Cases

• Preventing Scroll Chaining: Use the contain value to prevent scroll chaining between multiple scrollable areas, such as a dialog box within a scrollable page.
• Disabling Overscroll Effects: Use the none value to disable overscroll effects like the “bounce” effect on mobile devices, ensuring a smoother scrolling experience.
• Customizing Scroll Behavior: Combine the overscroll-behavior-x and overscroll-behavior-y properties to customize the overscroll behavior on the horizontal and vertical axes independently.

Conclusion

The overscroll-behavior property is a powerful tool for web developers, providing control over overscroll behavior and helping to create a smoother and more predictable user experience. By understanding and utilizing this property, you can improve the scrolling behavior of your web applications, making them more user-friendly and visually appealing.

Browser Compatibility

The overscroll-behavior property is widely supported across modern browsers, making it a reliable choice for controlling overscroll behavior in your web applications. Below is a summary of the browser compatibility for this CSS property:

Desktop Browsers

• Chrome: Supported since version 63.0.
• Firefox: Supported since version 59.0.
• Edge: Supported since version 18.0.
• Opera: Supported since version 50.0.
• Safari: Not supported as of the latest update.

Mobile Browsers

• Chrome for Android: Supported since version 63.0.
• Firefox for Android: Supported since version 59.0.
• Safari on iOS: Not supported as of the latest update.
• Opera Mobile: Supported since version 50.0.
• Samsung Internet: Supported since version 8.0.

Detailed Compatibility Table

Note on Browser Support

While the overscroll-behavior property is supported in most modern browsers, it is important to test your web applications across different browsers and devices to ensure consistent behavior. For browsers that do not support this property, such as Safari, you may need to implement alternative solutions or provide fallbacks to maintain a consistent user experience.

Example Fallback

If you need to provide a fallback for browsers that do not support the overscroll-behavior property, you can use feature detection with JavaScript:

if ('CSS' in window && CSS.supports('overscroll-behavior', 'contain')) {
  // The browser supports overscroll-behavior
} else {
  // The browser does not support overscroll-behavior, apply fallback
}

Conclusion

The overscroll-behavior property is a powerful tool for controlling overscroll behavior in web applications. With broad support across modern browsers, it provides a reliable way to enhance the user experience by preventing unwanted scroll chaining and overscroll effects. By understanding and utilizing this property, you can create smoother and more predictable scrolling experiences for your users.

See Also

For further reading and resources related to the overscroll-behavior property, you may find the following links and articles helpful:

• [Take control of your scroll: customizing pull-to-refresh and overflow effects]WebsiteUrl: An informative blog post on the Chrome Developers blog that delves into the details of the overscroll-behavior property and its practical applications.
• [CSS Overscroll Behavior Module Level 1]WebsiteUrl: The official specification document that defines the overscroll-behavior property and its constituent properties, overscroll-behavior-x and overscroll-behavior-y.
• [MDN Web Docs - overscroll-behavior]WebsiteUrl: A comprehensive guide on the overscroll-behavior property, including detailed explanations, examples, and browser compatibility information.
• [Can I use… overscroll-behavior]WebsiteUrl: A useful tool for checking the browser compatibility of the overscroll-behavior property across different browsers and versions.

These resources will provide you with in-depth knowledge and practical examples to help you effectively use the overscroll-behavior property in your web development projects.