通过控制容器高度的 CSS 过渡（transition）配合 overflow: hidden → overflow: auto 的切换，可模拟滚动条“渐入”效果，核心在于用高度变化驱动浏览器重绘 scrollbar 状态。
通过控制容器高度的 css 过渡（transition）配合 `overflow: hidden` → `overflow: auto` 的切换，可模拟滚动条“渐入”效果，核心在于用高度变化驱动浏览器重绘 scrollbar 状态。
要实现类似 Yarn 官网中滚动条“自然浮现”的动画效果（如点击“Versions”标签时侧边栏内容展开并伴随滚动条平滑出现），关键不在于直接给 ::-webkit-scrollbar 添加动画——滚动条本身无法被直接动画化，而是通过容器尺寸与溢出行为的协同过渡来间接达成视觉动效。
核心原理
当一个元素的 height 从 0（或较小值）经 transition 动态增长至适配内容的高度，且同时设置 overflow: hidden → overflow: auto 时，浏览器会在高度扩张过程中逐步“释放”溢出空间，从而让滚动条在恰当的时机（即内容真正超出视口时）以平滑方式显现。Yarn 的实现正是基于此：其
-
HTML 结构保持简洁
<div class="sidebar-view" id="sidebar"> <div class="sidebar-content"> <!-- 大量内容，足以触发滚动 --> <p>Version 1</p> <p>Version 2</p>...<!-- 更多 --> </div> </div> -
CSS 控制折叠/展开状态与过渡
.sidebar-view { overflow: hidden; /* 初始隐藏滚动条 */ transition: height 0.3s ease-in-out, overflow 0.1s step-end; /* step-end 避免过渡中短暂可滚动 */ will-change: height; } /* 展开状态：高度自适应，启用滚动 */ .sidebar-view.expanded { height: auto; overflow-y: auto; } /* 可选：为内部内容预留最小高度，避免收缩时内容截断 */ .sidebar-content { min-height: 1px; /* 触发 BFC，确保 height: auto 正确计算 */ } -
JavaScript 触发状态切换（例如点击事件）
const sidebar = document.getElementById('sidebar'); // 模拟展开逻辑（实际中可结合 resizeObserver 或预设高度） function expandSidebar() { // 先强制设为 0 高度以重置过渡起点 sidebar.style.height = '0'; sidebar.classList.remove('expanded'); // 强制重排，确保样式生效 void sidebar.offsetHeight; // 再设为 auto 并添加类名 sidebar.style.height = 'auto'; sidebar.classList.add('expanded'); }
✅ 注意事项
- overflow 本身不支持平滑过渡，因此采用 step-end 时间函数确保它在高度动画结束时才切换，避免中间状态出现“半滚动”异常；
- will-change: height 告知浏览器该属性将频繁变化，有助于开启 GPU 加速；
- 若内容高度动态不确定，建议先用 getBoundingClientRect().height 或 scrollHeight 获取目标高度，再进行 height: 0 → height: ${target}px 的精确过渡，比 height: auto 更可控；
- 此方案兼容 Chrome、Edge、Safari（WebKit 内核），Firefox 对 height: auto 过渡支持有限，建议 fallback 使用固定高度或 JS 计算。
总结
滚动条的“动画出现”本质是视觉错觉——它并非 scrollbar 自身在动，而是容器尺寸变化引发布局重排，使 scrollbar 在过渡终点自然浮现。掌握 height + overflow + transition 的组合逻辑，并辅以 will-change 和合理的 JavaScript 触发时机，即可复现 Yarn 那样细腻、不突兀的交互体验。
