HTML滚动不触发CSS transition，需JS监听scroll事件并切换类；scroll-behavior: smooth仅控制滚动过程平滑，不改变元素状态；正确做法是用transform过渡+scroll-margin-top适配固定头部+height过渡实现滚动条渐现。
HTML 页面滚动本身不会自动触发 CSS transition，因为滚动是浏览器原生行为，不改变元素的 CSS 属性值——而 transition 只在「属性值变化」时生效。想让滚动带动视觉过渡（比如头部隐藏、背景变色、滚动条浮现），必须靠 JavaScript 检测滚动状态，再手动切换类或修改内联样式。
scroll-behavior: smooth 是唯一原生滚动过渡
它只控制「滚动过程是否平滑」，不是视觉状态过渡。启用后，所有锚点跳转、window.scrollTo()、element.scrollIntoView() 都会带缓动效果：
html {
scroll-behavior: smooth;
}注意三点：
- 仅对可滚动容器生效（
html元素或设置了overflow: auto/scroll的子容器） - 若用户启用了系统级「减少动画」偏好（
prefers-reduced-motion: reduce），该效果会被强制禁用 - 它不解决「滚动时元素状态变化」的问题，比如 header 隐藏/显示仍需 JS 驱动
滚动监听 + class 切换是最常用过渡触发方式
核心逻辑：监听 scroll 事件 → 计算滚动方向/位置 → 添加/移除 CSS 类 → 由 transition 承担动画渲染。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 直接在
scroll回调里反复addClass('hidden').removeClass('shown')，导致 transition 被中断（类被瞬间替换，浏览器无法捕捉起始/结束状态） - 把
transition写在仅临时存在的类里（如只写在.hidden中），而没保留在基础类或通用规则中 - 忘记加
will-change: top或使用transform替代top，造成频繁重排卡顿
✅ 正确做法示例（header 向上滚动时隐藏）：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.header {
position: fixed;
top: 0;
transition: transform 0.4s ease-out; /* 用 transform 更高效 */
}
.header.hidden {
transform: translateY(-100%);
}JS 中只需：
if (currentScroll > lastScroll && currentScroll > 100) {
header.classList.add('hidden');
} else {
header.classList.remove('hidden');
}scroll-margin-top 配合 scrollIntoView 实现带偏移的平滑跳转
当页面有固定头部（fixed header）时，scrollIntoView({ behavior: 'smooth' }) 会让目标元素顶部紧贴视口顶部，结果被遮挡。解决方案是用 CSS 提前声明偏移量：
h2 {
scroll-margin-top: 80px; /* 留出 header 高度 */
}这样即使 JS 调用 el.scrollIntoView({ behavior: 'smooth' })，浏览器也会自动把目标元素定位到视口 80px 下方。比在 JS 里手动计算 top - 80 更稳定，且无需节流——CSS 层面原生支持。
⚠️ 注意：scroll-margin-top 不支持 IE，但现代浏览器（Chrome 69+、Firefox 68+、Safari 15.4+）均已支持。
滚动条出现时的“渐进式浮现”本质是 height 过渡
CSS 的 overflow 属性不可动画，所以不能直接给 overflow: hidden → auto 加 transition。真正有效的方案是驱动高度变化：
- 初始状态：
height: 0; overflow: hidden; - 展开状态：
height: auto;或具体像素值，同时overflow-y: auto; - 中间过程靠
transition: height 0.3s ease-in-out触发布局重排，滚动条随之自然出现
关键点：必须用 height（或 max-height）作为过渡属性，而不是 overflow；否则动画无效，滚动条会突兀弹出。
最易被忽略的是：滚动触发的过渡效果，往往依赖于「滚动事件是否真实发生」。如果 html 或 body 被设了 height: 100vh 或 overflow: hidden，整个页面就失去可滚动性，scroll 事件根本不会触发——此时任何基于滚动的过渡都失效。
