用 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 算位置，但这值受两件事干扰极大：
传媒公司模板(RTCMS)1.0
下载
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
- 页面被缩放（
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 后再执行
