scrolltimeline必须用@scroll-timeline规则声明，不能new创建；source须用selector()指向overflow-y: scroll且有固定高度的容器；start/end需用px/vh单位，动画须用animation-timeline绑定并配animation-range。
scroll-timeline 在 Chrome/Edge 中怎么写才不白写
Chrome 115+ 和 Edge 115+ 支持 scroll-timeline，但直接套文档代码大概率失效——因为缺少滚动容器绑定或时间轴范围定义。关键不是“加了没”，而是“浏览器认不认”。
必须同时满足三个条件：
- 滚动容器（如
<main></main>）需显式设置overflow-y: scroll且有确定高度（不能是height: auto或min-height） -
@scroll-timeline规则中，source必须指向该容器（用selector()），且start/end要用合法单位（如0px、100%，不能写0或空值） - 动画元素需通过
animation-timeline: --my-timeline绑定，且该 timeline 名必须与@scroll-timeline声明的名称完全一致（区分大小写）
常见错误：@scroll-timeline my-timeline { source: selector(#container); } 写成 source: #container ——后者无效，浏览器静默忽略。
transition: height 实现滚动条渐进出现的边界条件
想让滚动条随内容展开“自然浮现”，靠 transition: height 是目前最稳定方案，但它对 DOM 结构和 CSS 状态极其敏感。
必须确保：
- 初始状态用
height: 0+overflow: hidden，不能用max-height: 0（IE/旧 Safari 不支持max-height过渡） - 展开目标高度不能写
height: auto（CSS 过渡不支持auto值），得用 JS 测量后设为具体像素值，或用height: fit-content（仅现代浏览器） - 容器内子元素不能有
margin-top或margin-bottom外边距塌陷，否则高度计算偏差会导致滚动条提前/延迟出现
示例中常漏掉的一行：box-sizing: border-box。若容器有 padding，不加这句会导致过渡高度比内容高，滚动条会“多露一点”再回弹。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
scroll-behavior: smooth 的兼容性陷阱
scroll-behavior: smooth 看似开箱即用，但实际项目里最容易栽在两个地方：自定义滚动容器和动态插入内容。
注意：
- 如果滚动发生在某个
div内（比如侧边菜单、卡片列表），必须给该div单独加scroll-behavior: smooth，根html上的设置对它完全无效 - 用
innerHTML或 React/Vue 动态插入新节点后立刻调用scrollIntoView()，大概率跳不准——因为节点尚未完成 layout。得用requestAnimationFrame包一层，或监听resize事件后再滚动 - iOS Safari ≥15.4 才支持，低于此版本会退化为瞬间跳转，且无任何降级提示。如需兜底，得用
scrollTo({ top: y, behavior: 'smooth' })配合try/catch检测支持性
Intersection Observer 触发动画时为什么卡顿
用 IntersectionObserver 替代 scroll 事件做视口动画，本意是防卡顿，但若配置不当反而更慢。
高频踩坑点：
- 未设置
threshold：默认是[0]，意味着只要元素哪怕 1px 进入视口就触发。大量元素同时监听会导致频繁回调，尤其低端机上明显掉帧 - 在回调里直接操作 DOM 样式（如改
className）而没用requestIdleCallback或节流，容易阻塞主线程 - 观察器未复用：每个动画元素都新建一个
IntersectionObserver实例，内存和性能双浪费。应全局单例 + 回调内区分 target
真正轻量的做法：只观察关键区域（如首屏下方 200px），动画类名切换后立即 unobserve 该元素，避免持续监听已播放完的节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
