details 内容区滚动：固定高度下的正确写法

发布于 1周前

折叠面板放进固定高度的侧栏或弹窗后，展开时内容溢出却没有滚动条，根因是 overflow 加错了层级。details 自身不带滚动能力，把 overflow-y: auto 写在 details 上时，滚动边界只覆盖 summary 所在的框，内容区要么撑开容器，要么被直接裁掉。

笔记本电脑屏幕上显示的长页面，用于说明折叠内容溢出后的滚动表现 — 内容超过容器高度时，滚动条应由包裹层产生，而非 details 自身

根因

details 高度被写死，展开后子元素高度超过容器，但没有任何祖先元素声明可滚动；
overflow 写在 details 自身时，summary 与内容共处一个滚动容器，标题会随内容一起滚动；
盒模型层面还有一处：未设置 box-sizing: border-box 时，padding 与 border 会额外推高实际占用高度。

修正写法

<div class="panel">
  <details open>
    <summary>规格参数</summary>
    <div class="panel-body">
      <!-- 折叠内容 -->
    </div>
  </details>
</div>

.panel {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel details { height: auto; }

.panel-body {
  box-sizing: border-box;
  padding: 12px;
}

滚动交给外层 .panel，details 不再限制高度。summary 保持可见，滚动只发生在 .panel-body 区域。

三个边界

滚动链穿透。弹窗内的滚动容器补 overscroll-behavior: contain，避免滚到底后带动背景一起滚动。
WebView 差异。iOS WKWebView 上不要关闭 -webkit-overflow-scrolling: touch，也不要改用 JS 模拟滚动。
pointer-events 误伤。给 summary 加禁用态时不要整层 pointer-events: none，否则点击失效。

替代做法

内容很长且不需要折叠语义时，整体滚动容器或改用锚点跳转更省事。details 的价值在于原生折叠语义与键盘可达性，这两点用不上时，不必为了折叠而折叠。

常见问题（FAQ）

details 自身不能滚动吗？

可以。把 overflow-y 写在 details 上同样会出现滚动条，但 summary 会被卷入同一个滚动区，标题随内容一起滚动。要保留标题常驻，滚动容器应放在外层包裹元素上。

加了 max-height 为什么还是没有滚动条？

只有 overflow 取值为 auto 或 scroll 才会生成滚动容器。仅写 height 或 max-height 而保留默认的 visible，内容会溢出容器或被父级撑开，不出现滚动条。

展开后要不要用 JS 计算高度？

不需要。CSS 的 max-height 加 overflow-y 即可完成收口。用 JS 测量高度再赋值，会在内容异步加载或字体加载后出现偏差，还要额外处理窗口变化。

弹窗里滚到底后背景跟着滚动怎么处理？

给滚动容器加 overscroll-behavior: contain，阻断滚动链向外传递。这是 CSS 层面的处理，不需要监听 wheel 或 touchmove 事件。

移动端 WebView 中滚动发涩是什么原因？

iOS WKWebView 依赖系统惯性滚动。不要关闭 -webkit-overflow-scrolling: touch，避免用 JS 模拟滚动替代原生滚动，也不要在滚动容器外层叠加多余的 touch 手势处理。