Overscroll Behavior

Tailwind CSS version

v1.6.0+

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

Class reference

Auto

Use overscroll-auto 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-auto ...">Lorem ipsum dolor sit amet...</div>

Contain

Use overscroll-contain to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve “bounce” effects when scrolling past the end of the container in operating systems that support it.

<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.

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

Responsive

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.

<div class="overscroll-auto md:overscroll-contain lg:overscroll-none ...">
  <!-- ... -->
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Responsive and pseudo-class variants

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:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     overscrollBehavior: ['responsive'],
+     overscrollBehavior: ['responsive', 'hover', 'focus'],
    }
  }

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 false in the corePlugins section of your config file:

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

← Overflow   Position →