graphql
react

Tailwind CSS Overscroll Behaviour

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:
html
<div class="overscroll-auto">
  <!-- Scrollable content here -->
</div>

Preview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur iste, error expedita vel rerum ipsam adipisci voluptates distinctio magnam assumenda eius vero! Quod consequatur incidunt nulla deleniti impedit iste ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim labore, recusandae consectetur, illo minus repellendus voluptatem sed aut sapiente asperiores eos. Cumque, libero quibusdam itaque sit recusandae molestiae illo cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam suscipit dolor neque recusandae, eaque repellat saepe eveniet, libero voluptate nisi sint ipsum facere corrupti obcaecati explicabo ratione quam error? Cumque?

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.

html
<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 Behaviour Class Table

ClassProperties
overscroll-autooverscroll-behavior: auto;
overscroll-containoverscroll-behavior: contain;
overscroll-noneoverscroll-behavior: none;
overscroll-y-autooverscroll-behavior-y: auto;
overscroll-y-containoverscroll-behavior-y: contain;
overscroll-y-noneoverscroll-behavior-y: none;
overscroll-x-autooverscroll-behavior-x: auto;
overscroll-x-containoverscroll-behavior-x: contain;
overscroll-x-noneoverscroll-behavior-x: none;

Windframe Tailwind blocks

Pricing

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner