Tailwind Overscroll Behavior

The overscroll-{behavior} utility class in Tailwind CSS allows you to control the behavior of scrollable elements when they reach their scroll boundaries. With Tailwind's overscroll-{behavior} class, you can customize how the content scrolls or bounces at the edges of the scrollable container.

Applying Overscroll Behavior

To apply a specific overscroll behavior to an element, you can use the overscroll-{behavior} utility class, where {behavior} represents the desired behavior. The available behaviors are:

• overscroll-auto: Allows the default overscroll behavior defined by the browser. It may exhibit scroll bounce or rubber-band effect on supported platforms.
• overscroll-contain: Prevents the overscroll effect and limits the scroll movement to the scrollable container only.
• overscroll-none: Disables the overscroll effect completely, preventing any bounce or rubber-band effect. Here's an example:

<div class="overscroll-auto">
  <!-- Scrollable content here -->
</div>

Preview

Responsive Overscroll Behavior

Tailwind CSS allows you to apply overscroll behavior classes responsively at different breakpoints. To use responsive overscroll behavior classes, you can append the breakpoint prefix to the utility class. For example, md:overscroll-contain sets the overscroll behavior to overscroll-contain starting from the medium breakpoint and above.

<div class="overscroll-auto md:overscroll-contain">
  <!-- Scrollable content here -->
</div>

In the above example, the overscroll behavior of the <div> element is set to overscroll-auto by default, but starting from the medium breakpoint and above, it changes to overscroll-contain.

Tailwind Overscroll Behavior Class Table

Windframe Tailwind blocks

Pricing