局部滚动区域折叠时内容被截断，需用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>...大量日志文本...</pre>
</div>
</details>对应 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);
}
});
});嵌套滚动 + 折叠时性能抖动？关键在 contain 和 will-change
含长列表或虚拟滚动的局部区域，在折叠/展开瞬间卡顿，通常源于重排（reflow）。
- 避免在折叠容器上设
width: 100%或display: flex，它们会触发整行重排 - 给滚动容器加
contain: content，隔离渲染影响范围 - 不要滥用
will-change: transform：对max-height无效，反而增加内存开销
更稳妥的做法是：
- 折叠时用
visibility: hidden+pointer-events: none配合max-height，减少合成层切换 - 展开后首次滚动前，用
getBoundingClientRect()触发一次 layout，避免后续帧掉帧
真正难的不是让滚动区动起来，而是让它动得不卡、不闪、不丢位置——这些细节不会报错，但用户一滑就感知得到。
