虚拟列表中让 active 类名只加在当前选中项上的核心是：用 state（如 activeIndex）记录逻辑索引，渲染时比对 item.index === activeIndex 动态添加 class，并配合唯一 key（如 item.id）、aria-current="true" 和 tabindex 实现可访问性与状态同步。
虚拟列表里怎么让 active 类名只加在当前选中项上？
虚拟列表本身不渲染全部 DOM，所以不能靠遍历所有 <li> 手动加 class。关键在于：激活状态必须和滚动位置、数据索引联动，而不是依赖 DOM 是否存在。
- 用一个变量（比如
activeIndex）记录当前激活的逻辑索引，不是 DOM 位置 - 在渲染每一项时，判断
item.index === activeIndex，再决定是否加class="active" - 不要在
onScroll里反复查 offsetTop 或 getBoundingClientRect——虚拟列表的 item 高度通常是固定的，直接用Math.floor(scrollTop / itemHeight)算出可视区起始索引，再结合渲染范围推导“可能被激活的候选索引”
IntersectionObserver 能不能用来自动激活？
不能直接用。因为虚拟列表里大量 item 是空占位（<div></div>），没有真实内容节点，IntersectionObserver 监听不到；即使监听了，它只告诉你“是否进入视口”，不解决“用户点了哪一项”或“键盘导航聚焦到哪一项”的问题。
- 如果只是想高亮当前滚动到顶部的项，可以用
IntersectionObserver+threshold: [0]，但需确保每个 item 有唯一id和真实 DOM 节点（意味着放弃纯占位渲染） - 更稳妥的做法是：把激活逻辑交给业务层——点击时设
activeIndex，键盘导航时用ArrowUp/Down更新activeIndex，滚动时不做自动激活 - 注意：若开启平滑滚动（
scrollBehavior: 'smooth'），scrollTop变化是非即时的，别在scroll事件里直接读取它来更新激活项
React/Vue 里怎么避免激活态重置？
常见坑是：滚动后重新渲染，但 activeIndex 没同步进依赖数组，导致视图没更新；或者用了 key 基于 index 生成，但数据排序变化后 key 错位，激活项“粘”在错误位置。
- React 中，确保
activeIndex是 state，并在 item 渲染时参与className计算：className={`item ${index === activeIndex ? 'active' : ''}`} - Vue 中，避免用
:key="index"，改用唯一 ID（如:key="item.id"），否则排序/过滤后激活态会错乱 - 如果支持多端（比如 SSR），注意服务端首次渲染时
activeIndex必须与客户端一致，否则 hydration mismatch
为什么用 aria-current="true" 比只靠 CSS class 更重要？
屏幕阅读器不会读 class="active"，但会播报 aria-current。可访问性不是加分项，是底线。
立即学习“前端免费学习笔记（深入）”；
- 每个渲染项加上：
aria-current={index === activeIndex ? 'true' : undefined} - 别只写
aria-current="page"或"step"——虚拟列表里的激活是“当前选中项”，语义上就是"true" - 配合
tabindex="0"让非按钮类元素可聚焦，再用useEffect或mounted把焦点移到激活项（注意：仅在用户主动操作后聚焦，别在滚动时强制 focus，会打断屏幕阅读器流）
