HTML无法单独实现可点击滚动的字母索引通讯录，必须结合CSS定位与JavaScript逻辑，并严格遵循语义化（如用<section>分组、<h2>标题）和可访问性原则；右侧索引栏需用锚点链接配合scrollIntoView()或scroll-margin-top实现精准滚动，移动端须确保元素可点击且未被遮挡。
HTML 本身不提供通讯录或字母索引功能，它只是结构容器；真正实现可点击、可滚动、带锚点跳转的字母索引列表，必须配合 CSS 定位 + JavaScript 逻辑，且需严格遵循语义化与可访问性原则。纯 HTML 写出来的“通讯录列表”只能是静态文本，无法响应用户点击字母、自动定位到对应联系人区块。
怎么用 <ul> + <li> 构建语义化通讯录结构
通讯录本质是“按首字母分组的联系人集合”，不是无序列表的简单堆砌。每个字母组应使用 <section> 或带 aria-labelledby 的 <div> 包裹，组标题用 <h2>（不可用 <span> 或 <div> 模拟）。
常见错误：把所有联系人塞进一个 <ul>，再用 data-letter="A" 区分——这导致屏幕阅读器无法识别分组边界，键盘导航混乱。
- 每个字母组用独立
<section>，并设id（如id="letter-A"），供索引栏跳转 - 组内联系人用
<ul>+<li>，每项含姓名、电话等，避免用<table>或 div 布局 - 为每个组标题添加
aria-hidden="true"仅隐藏视觉样式，但保留<h2>结构供辅助技术识别
怎么让右侧字母索引栏点击后精准滚动到对应组
核心是锚点链接 + scrollIntoView() 行为控制。不能只靠 <a href="#letter-A">A</a>，因为默认滚动可能被 sticky header 遮挡、或在 Safari 中失效。
立即学习“前端免费学习笔记（深入）”；
正确做法是拦截点击，调用 element.scrollIntoView({ block: 'start', behavior: 'smooth' })，并手动修正偏移量。
- 索引字母链接必须有
href属性（哪怕只是#），否则不触发 :visited 样式，也不被键盘Tab访问 - 监听点击时，先
event.preventDefault()，再获取目标id对应的组元素 - 滚动前检查元素是否存在，避免控制台报
Cannot read property 'scrollIntoView' of null - 若页面有固定顶部导航栏（height: 60px），需传入
{ top: -60 }偏移，或用scroll-margin-topCSS 属性（兼容性注意：IE 不支持）
为什么 scroll-margin-top 比 JS 计算偏移更可靠
当通讯录嵌套在 flex / grid 容器中，或存在动态高度 header 时，JS 获取 offsetTop 容易出错（比如未触发 layout reflow 就读值）。而 scroll-margin-top 是 CSS 原生行为，由浏览器在滚动前自动应用，无需 JS 干预。
示例：
section[id^="letter-"] {
scroll-margin-top: 80px; /* 留出 header 高度 */
}- 必须作用于目标滚动容器内的实际锚点元素（即
<section id="letter-A">），不能写在父容器上 - Chrome 91+、Firefox 97+、Safari 15.4+ 支持；旧版 Safari 需回退到 JS 方案
- 该属性不影响元素自身布局，只影响滚动终点位置
移动端点击字母没反应？检查这三个硬性条件
移动端 Safari 和部分安卓 WebView 对 click 事件有 300ms 延迟，且对非可点击元素（如 <span>）的触摸响应极弱。字母索引栏必须满足以下任一条件，否则点击无效：
- 每个字母用
<a>标签包裹，并有href（哪怕href="#"） - 或给元素加
role="button"+tabindex="0"+ 监听keydown（Enter/Space）事件 - 或加
cursor: pointer+-webkit-tap-highlight-color: transparent（仅解决视觉反馈，不解决事件绑定）
最容易被忽略的是：索引栏用了 position: fixed，但未设置 z-index，结果被其他层遮住，看起来“点了没反应”——其实根本没触发事件。
