局部滚动区域折叠时内容被截断，需用max-height+overflow:hidden控制显隐并配合details[open]切换，禁用height:0；max-height动画失效主因是设了auto或存在height:100%、contain等干扰样式；滚动位置丢失需用toggle事件手动缓存还原scrolltop。
局部滚动区域折叠时内容被截断？先确认 overflow 和 height 的关系
局部滚动区域（比如一个固定高度的 div 套着 overflow-y: auto）一旦放进 details，折叠后常出现内容“卡在中间”或滚动条残留——根本原因是 details 默认不设高度，而子元素的 overflow 在父容器未约束高度时行为不可控。
- 折叠状态下，
details 高度由 summary 决定，但内部滚动区仍保留原有 height 或 max-height，导致视觉错位
- 不要给滚动容器设
height: 0：这会强制内容坍缩，破坏滚动逻辑，且无法触发动画
- 正确做法是让滚动容器本身参与折叠动画：用
max-height + overflow: hidden 控制其显隐，同时保留内部 overflow-y: auto
<details><summary>日志面板</summary><div class="scroll-container">
<pre class="brush:php;toolbar:false;">...大量日志文本...
对应 CSS：
.scroll-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease-out;
}
details[open] .scroll-container {
max-height: 300px; /* 必须是具体数值，不能是 auto */
overflow-y: auto;
}
为什么 max-height 动画在局部滚动区里容易失效
max-height 过渡失效，90% 是因为：
- 设了
max-height: auto：CSS 过渡不支持 auto，浏览器直接跳变
- 滚动容器内有
height: 100% 或 flex: 1：它们会撑开父级，抵消 max-height 限制
- 父级
details 或祖先元素用了 contain: layout 或 transform：可能触发层叠上下文，干扰高度计算
建议检查链路：
Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
- 用 DevTools 查看滚动容器最终计算出的
max-height 是否为 0 / 300px
- 临时移除所有
height、flex、contain 相关样式，确认动画是否恢复
- 若必须用弹性布局，改用
grid + minmax(0, 300px) 替代 max-height
折叠后滚动位置丢失？需要手动保存和还原
局部滚动区展开时默认回到顶部，用户上次看到的位置没了。这不是 bug，而是浏览器重绘时重置了 scrollTop。
- 原生
details 没有提供滚动位置钩子，必须用 JS 监听 toggle 事件
- 只在收起前读取并缓存
scrollTop，展开后再写回（注意：仅当内容 DOM 未销毁时有效）
document.querySelectorAll('.scroll-container').forEach(container => {
const details = container.closest('details');
let savedScroll = 0;
<p>details.addEventListener('toggle', () => {
if (!details.open) {
savedScroll = container.scrollTop;
} else {
// 等过渡开始后再设置，避免被 CSS 覆盖
setTimeout(() => {
container.scrollTop = savedScroll;
}, 10);
}
});
});</p>
嵌套滚动 + 折叠时性能抖动？关键在 contain 和 will-change
含长列表或虚拟滚动的局部区域，在折叠/展开瞬间卡顿，通常源于重排（reflow）。
- 避免在折叠容器上设
width: 100% 或 display: flex，它们会触发整行重排
- 给滚动容器加
contain: content，隔离渲染影响范围
- 不要滥用
will-change: transform：对 max-height 无效，反而增加内存开销
更稳妥的做法是：
- 折叠时用
visibility: hidden + pointer-events: none 配合 max-height，减少合成层切换
- 展开后首次滚动前，用
getBoundingClientRect() 触发一次 layout，避免后续帧掉帧
真正难的不是让滚动区动起来，而是让它动得不卡、不闪、不丢位置——这些细节不会报错，但用户一滑就感知得到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
