Tailwind CSS - 滚动溢出行为

Tailwind CSS - 过度滚动行为

Tailwind 的**过度滚动行为（Overscroll Behavior）**工具类让你控制当用户滚动超出容器边界时发生的情况。这对于防止“滚动链（scroll chaining）”至关重要，即滚动一个元素（如模态框或侧边栏）时，也会滚动其背后的内容。

过度滚动行为工具类

这些类允许你在元素和页面级别定义浏览器的滚动行为。

类名	CSS 属性
`overscroll-auto`	`overscroll-behavior: auto;`
`overscroll-contain`	`overscroll-behavior: contain;`
`overscroll-none`	`overscroll-behavior: none;`
`overscroll-y-contain`	`overscroll-behavior-y: contain;`
`overscroll-y-none`	`overscroll-behavior-y: none;`
`overscroll-x-contain`	`overscroll-behavior-x: contain;`
`overscroll-x-none`	`overscroll-behavior-x: none;`

核心概念

overscroll-auto （默认值）：正常滚动。当你滚动到元素的末尾时，父容器（包括主页面）将开始滚动。
overscroll-contain：最常见的用例。它阻止滚动链（scroll chaining）。滚动被“限制”在元素内部。父元素不会滚动。但是，它仍然允许浏览器原生的过度滚动效果，例如 macOS/iOS 上的“弹性回弹”。
overscroll-none：最严格的选项。它阻止滚动链并禁用浏览器原生的过度滚动效果。这可能很有用，但对某些用户来说可能会感觉不自然。

实际示例：可滚动模态框

让我们构建一个包含长内容的模态框。如果没有过度滚动控制，滚动到模态框底部会导致其背后的页面滚动。我们将使用 overscroll-contain 来解决这个问题。

注意： 要使此示例完全交互，你需要使用 JavaScript 来切换模态框的可见性。

<!-- 包含大量内容的主页面，用于演示滚动 -->
<body class="bg-slate-200 h-[200vh]">
  <div class="p-8">
    <h1 class="text-3xl font-bold">向下滚动查看问题...</h1>
  </div>

  <!-- 模态框覆盖层 -->
  <!-- 在实际应用中，你会使用 JS 添加/删除 'hidden' 等类 -->
  <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-lg w-full">
      <div class="p-4 border-b">
        <h2 class="text-xl font-semibold">模态框标题</h2>
      </div>

      <!-- 可滚动内容区域 -->
      <!-- 在此处应用 `overscroll-contain` 以防止背景滚动 -->
      <div class="p-4 h-64 overflow-y-auto overscroll-contain">
        <p class="text-slate-700 mb-4">这是模态框的可滚动内容区域。尝试滚动到顶部或底部。</p>
        <div class="h-[500px] bg-gradient-to-b from-cyan-200 to-blue-200 rounded flex items-center justify-center">
          <p class="font-mono">高内容</p>
        </div>
        <p class="text-slate-700 mt-4">如果没有 `overscroll-contain`，当你滚动到末尾时，模态框后面的页面将开始滚动。有了它，滚动将被限制在此元素内部。</p>
      </div>

      <div class="p-4 border-t flex justify-end">
        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">关闭</button>
      </div>
    </div>
  </div>
</body>

最佳实践：锁定主体滚动

一个常见的用户体验（UX）模式是，当模态框打开时，完全阻止 <body> 滚动。你可以通过在模态框可见时使用 JavaScript 向 <body> 元素添加 overflow-hidden 或 overscroll-none 类，并在模态框关闭时将其移除来实现。

用例：水平轮播图

你可以使用轴向特定的工具类，如 overscroll-x-contain 来制作水平滚动的轮播图（carousels）。这可以确保用户的水平滑动不会意外触发页面上的垂直滚动，从而提供更流畅的用户体验。

<div class="flex space-x-4 overflow-x-auto p-4 bg-white overscroll-x-contain snap-x snap-mandatory">
  <!-- 轮播项 -->
  <div class="snap-start shrink-0 w-64 h-32 bg-blue-200 rounded">项目 1</div>
  <div class="snap-start shrink-0 w-64 h-32 bg-green-200 rounded">项目 2</div>
  <div class="snap-start shrink-0 w-64 h-32 bg-yellow-200 rounded">项目 3</div>
  <div class="snap-start shrink-0 w-64 h-32 bg-red-200 rounded">项目 4</div>
</div>