React-virtualized List滚动异常及Autosizer失效问题求助

我之前也碰到过Chrome下react-virtualized List滚动抖动的问题，Firefox表现稍好确实是因为两款浏览器的渲染调度机制不一样。结合你的情况，给你几个排查和解决方向：

• 校准行高匹配度：虽然你给行元素传了style，但要确保你配置的rowHeight和行元素的实际渲染高度完全一致。如果行里有padding、border或者动态内容（比如换行文本），实际高度会和设置的rowHeight有偏差，虚拟滚动的位置计算就会出错，导致滚动时跳抖。如果行高不固定，建议改用CellMeasurer组件来动态计算行高，避免硬编码的高度偏差。
• 提升预渲染行数：把List的overscanRowCount属性从默认的10调高到20甚至30，让组件提前渲染更多行内容，减少滚动过程中频繁的DOM挂载/卸载，能大幅缓解抖动。
• 优化行元素渲染：给行元素添加will-change: transform样式，提示浏览器提前优化该元素的渲染；同时避免在行元素里用float、position: absolute这类可能触发重排的布局属性，改用flex布局更稳定。
• 检查Chrome滚动设置：Chrome默认的平滑滚动有时候会和虚拟滚动的计算冲突，你可以在浏览器设置里关闭“平滑滚动”试试，或者给List容器添加style={{ overflow: 'auto', WebkitOverflowScrolling: 'touch' }}来统一滚动行为。

和官方示例代码一致但不显示，大概率是容器尺寸的问题，Autosizer的工作依赖父容器有可计算的宽高，给你几个排查点：

• 确保父容器有明确尺寸：Autosizer的直接父容器必须设置固定高度/宽度，或者百分比高度（但要保证父容器的父级也有明确高度），不能是默认的height: auto。比如给父容器加style={{ height: '100vh', width: '100%' }}，让Autosizer能正确获取到可用空间。
• 检查宽高传递是否正确：确认Autosizer的children函数里，width和height确实传递给了List组件，而且这两个值不是0。可以在函数里console.log一下宽高，看看是不是获取到了正确的数值。
• 排查版本兼容问题：如果你的react-virtualized版本比较旧，可能和新版React的ref机制不兼容，建议升级到最新稳定版，或者检查是否正确使用了ref（比如函数组件里用useRef而不是字符串ref）。
• 兜底最小高度：给List组件添加minHeight: 200px的样式，防止Autosizer获取到的高度为0时List完全不显示，方便排查问题。

内容的提问来源于stack exchange，提问作者shinzou