Overscroll Behavior

Controls what happens when a user scrolls beyond the boundaries of a scrolling area. This prevents scroll chaining, where reaching the end of a scrollable element causes the parent container or page to scroll. In Tailwind v4, overscroll utilities provide improved handling of nested scrollable areas for a more polished user experience.

Layout2 variants3 examples

Official Docs Open Playground

Basic usage:

<div class="h-screen overflow-auto overscroll-contain">
  <!-- Long scrollable content -->
  <div class="h-[200vh] bg-gradient-to-b from-blue-100 to-blue-500 p-6">
    <h2 class="text-xl font-bold">Contained Overscroll Example</h2>
    <p>Scroll to the bottom - notice that when you reach the end, the page behind doesn't scroll (no bounce/scroll chaining).</p>
  </div>
</div>

Examples

Contained overscroll - prevents scroll chaining and bounce effects

<div class="h-screen overflow-auto overscroll-contain">
  <!-- Long scrollable content -->
  <div class="h-[200vh] bg-gradient-to-b from-blue-100 to-blue-500 p-6">
    <h2 class="text-xl font-bold">Contained Overscroll Example</h2>
    <p>Scroll to the bottom - notice that when you reach the end, the page behind doesn't scroll (no bounce/scroll chaining).</p>
  </div>
</div>

Edit in playground

Modal with independent scrolling that doesn't affect the page behind it

<!-- Modal with independent scrolling area -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] flex flex-col">
    <div class="p-4 border-b">
      <h2 class="text-xl font-bold">Modal Title</h2>
    </div>
    <div class="overflow-y-auto overscroll-contain p-4 flex-grow">
      <!-- Modal content that might be lengthy -->
      <div class="space-y-4">
        <p>This modal body can scroll independently.</p>
        <p>When you reach the end of this scrollable area, the page behind won't scroll.</p>
        <!-- Add more content to make it scrollable -->
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">Tall content area</div>
        <p>More content after the tall area.</p>
      </div>
    </div>
    <div class="p-4 border-t">
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Close</button>
    </div>
  </div>
</div>

Edit in playground

Chat interface with contained scrolling for messages list, preventing overscroll bounce effects

<!-- Chat interface with message list and fixed input -->
<div class="flex flex-col h-96 border rounded-lg shadow-md">
  <!-- Header -->
  <div class="bg-gray-100 p-3 border-b">
    <h3 class="font-medium">Chat Window</h3>
  </div>
  <!-- Message area with contained overscroll -->
  <div class="flex-grow overflow-y-auto overscroll-contain p-4 space-y-4">
    <!-- Messages -->
    <div class="bg-blue-100 p-3 rounded-lg ml-auto max-w-[80%]">
      <p>Hello! This is a message from me.</p>
    </div>
    <div class="bg-gray-100 p-3 rounded-lg mr-auto max-w-[80%]">
      <p>Hi there! This is a reply message.</p>
    </div>
    <!-- Add more messages to make it scrollable -->
    <div class="bg-blue-100 p-3 rounded-lg ml-auto max-w-[80%]">
      <p>Once you reach the top or bottom of this message list, the scroll won't "chain" to the page.</p>
    </div>
  </div>
  <!-- Fixed input area -->
  <div class="p-3 border-t bg-white">
    <div class="flex">
      <input type="text" class="flex-grow border rounded-l-lg p-2" placeholder="Type a message...">
      <button class="bg-blue-500 text-white p-2 rounded-r-lg">Send</button>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Overscroll Behavior utility with different values

Open Interactive Playground

Variants

auto: default browser behavior (may include bounce effects and scroll chaining); contain: prevents scroll chaining but may still show bounce effects; none: prevents both scroll chaining and bounce effects

autocontainnone