23. 溢出、滚动与滚动条

本节目标：掌握 overflow 属性的各种用法，理解滚动容器的创建方式，并学会用 v4.3 新增的 scrollbar 工具类自定义滚动条样式。

内容超出容器是最常见的布局问题之一。Tailwind 提供了完整的溢出和滚动控制工具类。

overflow：溢出控制

overflow-* 控制当内容超出容器边界时怎么处理：

类名	效果
`overflow-auto`	需要时自动显示滚动条
`overflow-hidden`	裁剪超出部分，不显示滚动条
`overflow-visible`	默认值，内容溢出也显示
`overflow-scroll`	始终显示滚动条（即使内容没溢出）

<!-- 内容超出时自动滚动 -->
<div class="h-48 overflow-auto">
  <p>很长很长很长...</p>
</div>

<!-- 直接裁剪 -->
<div class="h-48 overflow-hidden">
  <p>超出部分看不见</p>
</div>

单方向滚动

也可以只控制水平或垂直方向的溢出：

类名	方向
`overflow-x-auto`	水平方向
`overflow-y-auto`	垂直方向
`overflow-x-hidden`	水平裁剪
`overflow-y-hidden`	垂直裁剪

<!-- 水平滚动的图片画廊 -->
<div class="flex overflow-x-auto gap-4">
  <img class="shrink-0 w-64" src="1.jpg">
  <img class="shrink-0 w-64" src="2.jpg">
  <img class="shrink-0 w-64" src="3.jpg">
</div>

Tip

水平滚动容器里的子元素记得加 shrink-0，否则 flex 会把它们压缩到一行内，滚动就失效了。

滚动行为

滚动平滑

scroll-smooth 让页面内的锚点滚动有平滑动画：

<html class="scroll-smooth">
  <!-- 现在点击锚点链接会平滑滚动 -->
  <a href="#section2">跳转到第二节</a>
</html>

滚动吸附（Scroll Snap）

滚动吸附让滚动停止时自动对齐到特定位置，常用于轮播图、全屏滚动页面：

<!-- 容器：启用垂直吸附 -->
<div class="h-screen overflow-y-scroll snap-y snap-mandatory">
  <section class="h-screen snap-start">第一屏</section>
  <section class="h-screen snap-start">第二屏</section>
  <section class="h-screen snap-start">第三屏</section>
</div>

类名	效果
`snap-x`	水平吸附
`snap-y`	垂直吸附
`snap-mandatory`	强制吸附（松手后必须对齐）
`snap-proximity`	接近时才吸附
`snap-start`	吸附到元素起始位置
`snap-center`	吸附到元素中心
`snap-end`	吸附到元素结束位置

滚动条 gutter

scrollbar-gutter 预留滚动条空间，避免滚动条出现时布局抖动：

<div class="overflow-auto scrollbar-gutter-stable">
  <!-- 即使滚动条没出现，也预留了空间 -->
</div>

v4.3 新特性：scrollbar 工具类

v4.3 引入了一套完整的滚动条样式工具类，不需要写浏览器私有伪元素了：

滚动条宽度

类名	效果
`scrollbar-thin`	细滚动条
`scrollbar-auto`	自动宽度
`scrollbar-none`	隐藏滚动条但保留滚动功能

<!-- 隐藏滚动条，但仍然可以滚动 -->
<div class="h-64 overflow-auto scrollbar-none">
  <p>内容可以滚动，但看不到滚动条</p>
</div>

scrollbar-none 在移动端 UI 中很常见——保持滚动能力但视觉上更干净。

滚动条轨道和滑块

<div class="h-64 overflow-auto scrollbar-thin 
            scrollbar-track-gray-100 scrollbar-thumb-gray-400">
  <p>自定义颜色的滚动条</p>
</div>

scrollbar-track-* → 滚动条轨道颜色
scrollbar-thumb-* → 滚动条滑块颜色

颜色可以用任何 Tailwind 调色板颜色，比如 scrollbar-thumb-blue-500。

Note

v4.3 的 scrollbar 工具类基于标准的 scrollbar-color 和 scrollbar-width 属性，不需要 -webkit- 前缀。但注意 Firefox 和 Chrome 的表现可能略有差异。

文字截断：truncate

虽然不是 overflow 类，但 truncate 常和 overflow-hidden 一起用：

<p class="truncate">
  很长很长很长的文字会被截断显示省略号...
</p>

truncate 等价于：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行截断

v4 支持 line-clamp-* 控制截断行数：

<!-- 超过 3 行就截断 -->
<p class="line-clamp-3">
  很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字...
</p>

line-clamp-1 到 line-clamp-6 都有，还有 line-clamp-none 取消截断。

实际应用：可滚动表格

<div class="overflow-x-auto rounded-lg border">
  <table class="min-w-full">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left">姓名</th>
        <th class="px-6 py-3 text-left">邮箱</th>
        <th class="px-6 py-3 text-left">角色</th>
        <th class="px-6 py-3 text-left">状态</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

overflow-x-auto 让表格在小屏幕上可以水平滚动，min-w-full 确保表格不会被压缩变形。

实际应用：固定高度的内容区

<div class="flex flex-col h-screen">
  <header class="shrink-0">顶部导航</header>
  
  <!-- 主内容区：占满剩余空间，内容超出时滚动 -->
  <main class="flex-1 overflow-auto p-6">
    <p>页面内容...</p>
  </main>
  
  <footer class="shrink-0">底部</footer>
</div>

关键组合：flex-1 + overflow-auto。容器自动填满剩余高度，内容超出时出现滚动条。

本节小结

overflow-auto / overflow-hidden / overflow-scroll → 溢出控制
overflow-x-* / overflow-y-* → 单方向控制
scroll-smooth → 平滑滚动
snap-* → 滚动吸附
scrollbar-thin / scrollbar-none → v4.3 滚动条宽度
scrollbar-track-* / scrollbar-thumb-* → v4.3 滚动条颜色
truncate → 文字截断
line-clamp-* → 多行截断