scrollArea无法滚动

问题本质

ScrollArea（如 Radix UI、shadcn/ui 等）无法滚动的根本原因是缺乏明确的高度约束。ScrollArea 需要知道自己的确切高度才能计算是否需要显示滚动条。

常见错误模式

// ❌ 错误：ScrollArea 无法获得明确高度
<div className="container">
  <ScrollArea className="h-full">
    <LongContent />
  </ScrollArea>
</div>

通用解决方案

方案1：CSS Grid 布局（推荐）

// ✅ 正确：使用 Grid 提供明确的高度约束
<div className="grid h-screen grid-rows-[auto_1fr] overflow-hidden">
  {/* 固定头部 - 自动高度 */}
  <div>
    <Header />
    <Navigation />
  </div>
  
  {/* 可滚动内容 - 占据剩余空间 */}
  <div className="min-h-0">
    <ScrollArea className="h-full">
      <LongContent />
    </ScrollArea>
  </div>
</div>

关键点：

• h-screen: 给容器明确的视口高度
• grid-rows-[auto_1fr]: 头部自适应，内容区占剩余空间
• min-h-0: 防止内容撑开容器
• overflow-hidden: 防止页面级滚动

方案2：Flexbox 布局

// ✅ 正确：使用 Flexbox 提供明确的高度约束
<div className="flex h-screen flex-col overflow-hidden">
  {/* 固定头部 - 不收缩 */}
  <div className="shrink-0">
    <Header />
    <Navigation />
  </div>
  
  {/* 可滚动内容 - 占据剩余空间 */}
  <div className="min-h-0 flex-1">
    <ScrollArea className="h-full">
      <LongContent />
    </ScrollArea>
  </div>
</div>

关键点：

• flex-col h-screen: 纵向 Flexbox + 明确高度
• shrink-0: 防止头部被压缩
• flex-1 min-h-0: 内容区占剩余空间且正确计算高度

方案3：固定高度（适用于已知尺寸场景）

// ✅ 适用于模态框、侧边栏等固定尺寸场景
<div className="h-96 overflow-hidden">
  <div className="h-16">
    <Header />
  </div>
  <div className="h-80">
    <ScrollArea className="h-full">
      <LongContent />
    </ScrollArea>
  </div>
</div>

方案4：计算高度（动态场景）

// ✅ 适用于需要动态计算的复杂场景
<div className="h-screen overflow-hidden">
  <div>
    <Header />
    <Navigation />
  </div>
  <div className="h-[calc(100vh-120px)]">
    <ScrollArea className="h-full">
      <LongContent />
    </ScrollArea>
  </div>
</div>

高度约束的层级传递

正确的高度链

根容器(h-screen) → 布局容器(grid/flex) → ScrollArea容器(明确高度) → ScrollArea(h-full) ✅

错误的高度链

根容器(auto) → ScrollArea(h-full) → 无法计算 ❌

常见陷阱与解决

1. 嵌套容器过多

// ❌ 错误：过多嵌套导致高度丢失
<div className="wrapper">
  <div className="container">
    <div className="content">
      <ScrollArea className="h-full">
        <LongContent />
      </ScrollArea>
    </div>
  </div>
</div>

// ✅ 正确：简化结构，明确高度传递
<div className="h-screen overflow-hidden">
  <ScrollArea className="h-full">
    <LongContent />
  </ScrollArea>
</div>

2. 忘记设置 overflow-hidden

// ❌ 错误：页面和 ScrollArea 同时滚动
<div className="h-screen">
  <ScrollArea className="h-full">
    <LongContent />
  </ScrollArea>
</div>

// ✅ 正确：阻止页面级滚动
<div className="h-screen overflow-hidden">
  <ScrollArea className="h-full">
    <LongContent />
  </ScrollArea>
</div>

3. 缺少 min-h-0

// ❌ 错误：Grid/Flex 子项可能撑开容器
<div className="grid h-screen grid-rows-[auto_1fr]">
  <div>Header</div>
  <div>
    <ScrollArea className="h-full">
      <LongContent />
    </ScrollArea>
  </div>
</div>

// ✅ 正确：防止子项撑开
<div className="grid h-screen grid-rows-[auto_1fr]">
  <div>Header</div>
  <div className="min-h-0">
    <ScrollArea className="h-full">
      <LongContent />
    </ScrollArea>
  </div>
</div>

方案选择指南

场景	推荐方案	原因
全屏应用布局	CSS Grid	语义清晰，代码简洁
组件内部布局	Flexbox	更