Overscroll Behavior

v1.6.0+

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

Auto

Use to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area.

<div class="overscroll-contain ...">Lorem ipsum dolor sit amet...</div>

None

Use overscroll-none to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent “bounce” effects when scrolling past the end of the container.

To control the overscroll-behavior property at a specific breakpoint, add a {screen}: prefix to any existing overscroll-behavior utility. For example, use md:overscroll-contain to apply the overscroll-contain utility at only medium screen sizes and above.

  <!-- ... -->

Customizing

By default, only responsive variants are generated for overscroll-behavior utilities.

You can control which variants are generated for the overscroll-behavior utilities by modifying the overscrollBehavior property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the overscroll-behavior utilities in your project, you can disable them entirely by setting the overscrollBehavior property to in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     overscrollBehavior: false,
  }