CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



overscroll-behavior-y

Overscroll-behavior-y is a CSS property that controls the behavior of the vertical scrollbar when the content of an element is scrolled beyond its boundaries. It specifies whether or not to allow the user to overscroll the content vertically and how the browser should handle the overscrolling.

The overscroll-behavior-y property is a part of the CSS overscroll-behavior module, which also includes the overscroll-behavior-x property for controlling horizontal overscrolling.

Syntax

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

    
        overscroll-behavior-y: auto | contain | none;
    

The property accepts three values:

  • auto: The default value. The browser will handle the overscrolling behavior.
  • contain: The browser will prevent the overscrolling from propagating to the parent element.
  • none: The browser will not allow any overscrolling behavior.

Examples

Let's take a look at some examples of how to use the overscroll-behavior-y property:

Example 1: Default Behavior

In this example, the overscroll-behavior-y property is not set, so the default behavior is used:

    
        <div style="height: 100px; overflow-y: scroll;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, elit elit bibendum elit, euismod elit elit elit.</p>
        </div>
    

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, elit elit bibendum elit, euismod elit elit elit.

As you can see, the overscrolling behavior is handled by the browser by default.

Example 2: Contain Behavior

In this example, the overscroll-behavior-y property is set to contain:

    
        <div style="height: 100px; overflow-y: scroll; overscroll-behavior-y: contain;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, elit elit bibendum elit, euismod elit elit elit.</p>
        </div>
    

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, elit elit bibendum elit, euismod elit elit elit.

As you can see, the overscrolling behavior is prevented from propagating to the parent element.

Example 3: None Behavior

In this example, the overscroll-behavior-y property is set to none:

    
        <div style="height: 100px; overflow-y: scroll; overscroll-behavior-y: none;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, elit elit bibendum elit, euismod elit elit elit.</p>
        </div>
    

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, elit elit bibendum elit, euismod elit elit elit.

As you can see, the overscrolling behavior is not allowed.

Browser Support

The overscroll-behavior-y property is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer.

Conclusion

The overscroll-behavior-y property is a useful CSS property for controlling the behavior of the vertical scrollbar when the content of an element is scrolled beyond its boundaries. It allows you to specify whether or not to allow the user to overscroll the content vertically and how the browser should handle the overscrolling. By using this property, you can improve the user experience of your web applications.

References

Activity