滚动条淡入淡出需通过height过渡实现，overflow不可动画；初始设height:0、overflow:hidden，展开时设固定高度并触发重排，收起时先重置height再移除类。
滚动条本身不能直接淡入淡出，得靠 height + overflow 驱动
浏览器不支持对 overflow 属性做 CSS 过渡，所以写 transition: overflow 0.3s 完全无效。真正能动画的是容器高度——当 height 从 0 平滑过渡到 auto（或具体值），内容撑开、溢出触发、滚动条自然“浮现”，视觉上就像淡入；收起时同理。
常见错误是试图给 overflow-y: auto 加 transition，或者用 opacity 包裹整个滚动区（透明但依然可滚动、仍占位、交互照常）。
- 必须用
height变化作为动画主轴，overflow只负责开关滚动能力 - 初始状态设
height: 0; overflow: hidden;，展开后设height: auto; overflow-y: auto; -
height: auto无法直接过渡，需预设一个足够大的固定高度（如height: 500px），或用 JS 测量后设具体值 - 若内容高度不确定，更稳妥的做法是：先设
height: 0→ 强制重排（el.offsetHeight）→ 再设目标高度 → 触发 transition
用 CSS 实现平滑滚动条浮现的最小可行代码
以下结构适用于侧边菜单、折叠面板等需要“展开即带滚动条”的场景：
.scroll-container {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.scroll-container.open {
height: 300px; /* 或通过 JS 动态计算 */
overflow-y: auto;
}
关键点：
-
transition必须写在初始类（.scroll-container）里，不能只写在.open中 - 高度值不能用
auto，否则过渡失效；300px 是示例，实际应根据内容最大高度设定，或用 JS 注入真实高度 - 如果内容动态加载，需在数据渲染完成后再切换
.open类，并确保 DOM 已挂载 - 滚动条样式可额外用
::-webkit-scrollbar自定义，但不影响动画逻辑
JS 控制高度过渡时容易漏掉的重排步骤
直接 el.classList.add('open') 常导致动画不触发——因为浏览器可能把“设高度”和“应用 transition”合并为一次渲染。必须插入强制重排：
function toggleContainer(el) {
if (el.classList.contains('open')) {
el.style.height = '0';
el.offsetHeight; // 强制重排，让 height: 0 生效
setTimeout(() => el.classList.remove('open'), 10);
} else {
el.classList.add('open');
const targetHeight = el.scrollHeight + 'px'; // 真实内容高度
el.style.height = '0';
el.offsetHeight; // 再次强制重排
el.style.height = targetHeight;
}
}
说明：
-
el.offsetHeight是最轻量的重排触发方式，比getComputedStyle更快 - 展开前先设
height: 0再重排，是为了让后续设targetHeight能真正触发 transition - 收起时，先移除
.open类，再设height: 0，否则 transition 会反向执行（从 auto → 0，但 auto 不可动画） - 如果容器有 padding/border，
scrollHeight已包含，无需额外加
IE 和旧版 Safari 的降级处理很现实
IE 完全不支持 height 过渡（尤其从 0 → auto），Safari 13.3 及更早版本对 height: 0 → 固定值的过渡也有卡顿。务实做法不是硬塞 polyfill，而是分层降级：
- 检测
'requestAnimationFrame' in window和'transition' in document.body.style，双满足才启用 CSS 过渡 - 不满足时，改用
max-height过渡（设极大值如max-height: 2000px），兼容性更好但精度略低 - 极端情况（如 IE11）直接跳过动画，用
display: block/none切换，配合visibility: hidden避免布局抖动 - 别依赖
IntersectionObserver或 scroll 监听来驱动这个动画——它和滚动条浮现无关，那是另一类需求
最易被忽略的是：动画结束后的清理。比如收起后未重置 height 为 ''（空字符串），下次展开可能因内联样式阻塞 height 计算，导致过渡失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
