移动端侧边字母导航栏不能直接用position: fixed+硬编码top值对齐，因fixed脱离文档流无法响应滚动或结构变化；必须用JS实时监听scroll+getBoundingClientRect计算激活项，并调用scrollIntoView精准跳转，配合IntersectionObserver与触控热区优化体验。
移动端侧边字母导航栏不能直接用 position: fixed + 硬编码 top 值对齐，因为 fixed 元素脱离文档流，无法响应主列表滚动或结构变化。真正能跑通的方案是：字母栏保持 fixed，但激活状态和跳转逻辑全由 JS 实时驱动。
为什么 position: fixed 的字母栏总对不齐？
根本原因是 fixed 定位完全脱离文档流——它既不知道主列表在哪，也不感知滚动位置，更不会随行高、padding、字体大小变化自动调整。所谓“对齐”，往往是靠手动调 top 值凑出来的，一换设备或改样式就错位。
- 别给每个字母项设固定
top，用display: flex; flex-direction: column;垂直堆叠即可 - 主列表中每组内容必须包裹在带
data-letter="A"的容器里（如<div data-letter="B">） - 字母值统一用大写，避免大小写判断出错
如何监听滚动并实时激活对应字母？
靠 scroll 事件 + getBoundingClientRect() 判断可视区域内的首组内容属于哪个字母，再高亮对应导航项。高频滚动必须节流，否则卡顿明显。
- 用
requestAnimationFrame包裹滚动处理逻辑，避免帧率暴跌 - 每次滚动只查一次所有
[data-letter]元素的位置，缓存结果复用 - 优先检查
intersectionRatio > 0.1的区块，减少误判（尤其当首项刚进视口时）
点击字母怎么精准跳转到对应内容区？
别算 offsetTop 或用 window.scrollTo，主列表很可能不是 window 滚动，而是某个 overflow-y: auto 的父容器。最稳的方式是直接调 scrollIntoView。
立即学习“前端免费学习笔记（深入）”；
- 先查是否存在对应
data-letter的元素，不存在就忽略点击，不报错也不静默失败 - 调用
element.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 如果主列表用了虚拟滚动（如
react-window），不能查 DOM，得从数据源映射位置，再调其提供的滚动 API
移动端点击没反应或误触怎么办？
手指热区太小、:active 样式无反馈、和主列表滚动冲突，是最常见原因。
- 字母项最小点击宽度设为
44px（iOS 推荐最小触控尺寸），加padding扩展热区 - 加
touch-action: manipulation防止长按呼出菜单干扰 - 点击时临时禁用主列表的
scroll监听，跳转完成后再恢复
真正难的不是布局，而是滚动同步精度和移动端交互容错——哪怕一个像素偏差，用户就会觉得“卡”或“不对”。别省掉 IntersectionObserver 的 fallback 逻辑，也别跳过热区校验，这些细节决定体验是否可信。
