字母导航栏用 fixed 定位无法自动对齐滚动内容，因其脱离文档流；需监听 scroll + getBoundingClientRect 实时计算激活项，并用 scrollIntoView 平滑跳转，配合 IntersectionObserver 和缓存优化性能。
字母导航栏用 position: fixed 为什么总对不齐滚动内容？
因为 fixed 脱离文档流，它不会感知主列表的滚动位置变化，更不会自动匹配每个字母对应的内容区域。你看到的“对齐”，其实是靠手动估算或硬编码 top 值凑出来的，一旦列表结构、行高、字体大小或容器 padding 变了，立刻错位。
真正可行的做法是：字母栏保持 fixed，但每个字母的激活状态必须由主列表滚动时实时计算决定——也就是监听 scroll，再比对每个区块的 getBoundingClientRect()。
- 别给字母项设固定
top，用display: flex; flex-direction: column;垂直堆叠即可 - 主列表每一组「以某字母开头」的内容，需包裹在带
data-letter="A"的容器里（比如<div data-letter="B">...） - 滚动监听频率高，加
requestAnimationFrame节流，否则卡顿明显
如何让点击字母快速滚动到对应内容区？
直接用 element.scrollIntoView({ block: 'start', behavior: 'smooth' }) 最稳妥。别用 window.scrollTo 加偏移量计算——滚动容器不一定是 window，可能是某个 overflow-y: auto 的父容器，硬算 offset 容易漏掉 padding、border、transform 等影响。
- 确保目标区块有唯一可查的
data-letter属性，且值全大写（避免大小写判断出错） - 点击前先检查该字母是否有对应内容，没有就忽略，别报错或静默失败
- 如果主列表用了虚拟滚动（如
react-window），不能直接查 DOM，得从数据源映射位置，再调用其提供的滚动 API
移动端点击字母没反应或误触怎么办？
手指点击热区太小，:active 样式没反馈，或者和主列表滚动冲突，是最常见原因。CSS 里光写 font-size: 12px 是不够的，iOS Safari 对小于 44px 的点击区域会自动放大，但行为不可控。
立即学习“前端免费学习笔记（深入）”；
- 给每个字母
<span>包一层<button type="button">，既语义正确，又自带点击反馈和最小尺寸保障 - 加
touch-action: manipulation到字母栏容器，禁用双指缩放和长按菜单，减少延迟 - 避免在字母栏上监听
scroll或绑定preventDefault，否则 iOS 上可能拦截掉原生滚动
性能差、滚动卡顿，是不是 fixed 导致的？
不是 fixed 本身的问题，而是滚动监听里频繁读取布局信息（比如 offsetTop、getBoundingClientRect）触发了强制同步布局（layout thrashing）。尤其当主列表项多、样式复杂时，每帧都重排重绘，帧率直接掉到 20fps 以下。
- 把所有需要读取的位置信息缓存起来，只在内容更新或窗口 resize 时重新计算一次
- 用
IntersectionObserver替代scroll监听来判断当前可见区块——它异步执行，不阻塞渲染 - 字母栏本身尽量精简：不用阴影、渐变、border-radius，背景用纯色，避免层叠上下文（
z-index过多）
最麻烦的其实是动态内容——比如搜索后列表重排、异步加载新数据，这时候缓存的位置信息全失效，必须重新收集，但很多人忘了这一步，结果搜完字母栏就“失联”了。
