滚动本身不能触发CSS transition，因scrollTop不可过渡；需将滚动转化为类切换或样式变更，确保过渡链完整。scroll-behavior: smooth可实现原生滚动缓动，须作用于根元素或自定义滚动容器，现代浏览器均支持。
滚动本身不能直接触发 CSS transition，因为 scrollTop 不是可过渡的 CSS 属性；真正能做平滑过渡的是“滚动带来的状态变化”，比如元素进入视口、固定定位切换、高度展开等。关键在于把滚动事件转化为可控的类切换或样式变更，并确保过渡链不被中断。
scroll-behavior: smooth 是最简方案，但只管滚动过程
它让锚点跳转、scrollIntoView()、scrollTo() 自带缓动效果，无需 JS：
- 必须写在根元素上：
html { scroll-behavior: smooth; }；自定义滚动容器（如overflow: auto的<div>）需单独加该声明 - 不兼容 IE，但现代浏览器（Chrome ≥61、Firefox ≥36、Safari ≥15.4、Edge ≥79）均支持
- 若锚点跳转失效，优先检查目标元素是否有合法
id（不能以数字开头）、是否已渲染、是否设置了tabindex="-1"（尤其对<h2>等非聚焦元素） -
transition对scrollTop完全无效，别在html或body上写transition: scroll 0.3s—— 浏览器会忽略
滚动监听 + class 切换：页眉隐藏/显示动画的核心逻辑
常见错误是滚动时“向上消失有动画、向下出现却瞬时”，根本原因是 transition 声明被类移除动作打断：
- 正确做法：保持
transition始终生效 —— 把它写在基础类（如.header__top）里，而非状态类（如.nav_up） - JS 触发时，先添加目标类（如
.nav_up），再用requestAnimationFrame或 jQuery 的.addClass(className, callback)延迟移除源类，确保浏览器有完整起止值参与过渡计算 - 示例关键 CSS：
.header__top { top: 0; transition: top 0.5s ease-in-out; }，而.nav_up { top: -120px; }仅负责终态，不带transition - 避免在滚动回调中直接设
style.top，这会覆盖 CSS 过渡；统一走 class 控制
滚动触发展开容器：height 过渡替代 overflow 动画
CSS 不支持 overflow 属性的过渡，所以“滚动条渐进出现”本质是靠高度变化驱动的布局重排：
立即学习“前端免费学习笔记（深入）”；
- 初始态：
height: 0; overflow: hidden;→ 内容不可见、无滚动条 - 展开态：
height: auto;或具体像素值 +overflow-y: auto;→ 滚动条按内容溢出自动渲染 - 过渡必须作用于
height：transition: height 0.3s ease-in-out;；不要用max-height模拟（精度差、易卡顿） - 若内容高度动态（如异步加载后展开），
height: auto无法过渡，得先用 JS 测高：el.scrollHeight，再设为具体值，动画结束后再切回auto
最容易被忽略的一点：所有基于滚动的过渡效果，都依赖「状态变化前后的样式声明必须共存于同一时刻」—— 类切换顺序、transition 所在位置、是否触发重排，三者缺一不可。一旦其中任一环节断开，动画就退化为瞬时切换。
