用途:处理虚拟化列表/数据网格在窗口化接缝处出现的缺陷。虚拟化只挂载视口附近的少量行,因此形成三项契约:由每行尺寸估算推导的总滚动范围、视口外挂载的 overscan 缓冲、以及假设所有行都在 DOM 中的功能(页内查找、屏幕阅读器计数、焦点、粘性对齐)。
主要能力与检查点:
- 测试中关闭虚拟化会掩盖问题。disableVirtualization、onShouldVirtualize={() => false}、renderAllRows 或仅 5 行的 fixture 会挂载整列表,导致空白行、偏移漂移、焦点丢失无法复现;至少保留一条开启虚拟化的浏览器/e2e 路径(真实条目数、固定容器高度)。
- estimateSize 要接近真实值,并用 measureElement 上报实测高度,否则滚动会跳动闪烁;预插(prepend/聊天流)需锚定稳定条目补偿偏移,CSS overflow-anchor 只能锚定已挂载的 DOM 节点。
- overscan 是双向预算:过小快速滚动出现白块,过大增加每帧挂载量、影响 INP 与内存;动态测量列表宜略高。
- 假设全量 DOM 的功能会静默失效:Ctrl+F、全选、导出可见项、querySelector 只看窗口;若需页内查找,可用 content-visibility: auto 配合 contain-intrinsic-size,与真正窗口化是不同取舍。
- 无障碍:列表项需 aria-setsize/aria-posinset(role=option/listitem 或 role=feed 中的 article),网格容器需 aria-rowcount/aria-colcount,部分加载行/单元格需 aria-rowindex/aria-colindex,总数未知用 -1,否则 AT 会播报错误数量。
- 聚焦行卸载会丢焦点(回落到 body),需用 roving tabindex 等主动管理;粘性表头与固定列须与主体共享滚动计算,在动态高度和滚动两端验证对齐。
用法:可用 rg 命令定位 useVirtualizer、Virtuoso、react-window、AutoSizer、DataGrid,以及 estimateSize、measureElement、overscan、aria-setsize、prepend 等关键配置。仅当出现用户可见契约破坏(滚动跳变/白块、测试掩盖、DOM 窗口假设破坏、对齐漂移)才提交 PR;固定高度且估算正确、仅调 overscan 无可见问题等属配置而非缺陷。验证以开启虚拟化的浏览器/e2e 滚动测试和 AT/axe 的 aria 计数断言为准。
限制:无 linter 能捕获窗口化缺陷;资料未提供具体库版本兼容性与安装命令;相关无障碍测试与焦点恢复细节由相邻技能承担。