用 dataset 存状态比 class 更可靠，intersectionobserver 替代 scroll 监听，getboundingclientrect 需校正缩放与 iframe 偏移，react/vue 中 key 要稳定、ref 要延迟读取，状态更新需分数据层、视图层、时机钩子三层协同。
用 dataset 存状态比用 class 名更可靠
动态添加的时间轴节点，状态（比如“已完成”“进行中”“未开始”）如果只靠 class 控制，后续 js 查找、切换、判断时容易和样式类名耦合，一改 CSS 就断逻辑。直接用 dataset 绑定语义化状态更稳。
- 添加节点时写：
li.dataset.status = "active"，而不是li.classList.add("is-active") - 查状态统一用
li.dataset.status === "active"，不依赖 class 是否存在或命名是否一致 - 避免用
li.className.includes("active")这种字符串匹配——万一 class 是"item-active"就误判
时间轴滚动到可视区域时触发状态更新，别用 scroll 频繁监听
用户滑动页面，想让“当前节点”自动高亮，但直接绑 scroll 事件会导致大量重复计算，卡顿明显，尤其在移动端。
- 用
IntersectionObserver替代：它原生节流，且能精准感知元素是否进入视口 - 观察每个时间轴项的
li，当isIntersecting === true且intersectionRatio > 0.3再更新状态，避免刚露个边就误判 - 不要给所有节点都开 observer——先取当前视口附近 3～5 个节点做观察，其余延迟初始化
getBoundingClientRect() 判断相对位置时注意 iframe 和缩放影响
有些时间轴要根据节点离顶部距离做“进度条”式状态映射（比如 0%～100%），常用 el.getBoundingClientRect().top 算位置，但这值受两件事干扰极大：
- 页面被缩放（
transform: scale()或浏览器缩放）时，getBoundingClientRect返回值仍按原始尺寸算，结果偏移 - 如果时间轴在
iframe里，父页滚动不会触发子页scroll，但getBoundingClientRect的top值会包含 iframe 自身 offset，需手动减去iframe.offsetTop - 稳妥做法：用
window.pageYOffset + el.getBoundingClientRect().top得到绝对文档坐标，再对比目标锚点位置
React/Vue 中动态渲染时间轴，key 和 ref 不要混用
框架里加新节点，状态错乱常不是逻辑问题，而是 dom 引用没对上。比如用 map 渲染后，想用 ref 拿最新一个节点去 scrollIntoView，结果拿到的是旧节点。
立即学习“前端免费学习笔记（深入）”；
- 确保每个时间轴项的
key是稳定唯一标识（如id），别用数组索引——否则插入中间项会导致后续所有 key 错位 - 不用
ref直接存 DOM 节点；改用useRef（React）或template ref（Vue 3）配合nextTick或useEffect延迟读取 - 状态更新后立即调
scrollIntoView？大概率失败——DOM 还没重绘，得等框架完成 patch 后再执行
状态真正难控的点不在“怎么设”，而在“什么时候设”和“设完谁来信”。时间轴节点多、滚动快、嵌套深的时候，靠一次赋值或单次监听根本兜不住。得把状态更新拆成“数据层标记”+“视图层响应”+“时机钩子”三层，少一层都会漏。