虚拟列表滚动时内容错位，如何解决？

Dev · 常青提问于 2026-01-29 17:56:27 阅读 135

优化

我在给聊天列表做虚拟滚动优化时遇到了问题，当快速滚动到中间区域后，列表内容会出现几秒的错位闪烁，但过一会又恢复正常。

已经用react-window实现了基础虚拟列表，设置了itemSize为60，容器高度500px。尝试在scroll时手动计算offset:


const [offset, setOffset] = useState(0);
const handleScroll = (e) => {
  const scrollTop = e.target.scrollTop;
  setOffset(scrollTop % 60); // 按item高度取余
};

但发现当聊天消息包含图片时，实际item高度会超过60px，导致滚动位置计算错误。控制台没有报错，但视觉上出现内容错位和闪动，特别是滚动到包含长文本的item时更明显。

试过把itemSize改成变量动态计算，但这样会导致渲染区域不断变化，反而更卡顿。请问这种动态高度的虚拟列表该怎么处理？

我来解答赞 15 收藏

反馈

1 条解答

Des.胜楠 Lv1

这问题我之前也踩过坑，动态高度的虚拟列表确实是个麻烦事。别走弯路了，直接告诉你最靠谱的解决方法：用 react-virtualized 的 AutoSizer 和 CellMeasurer。

核心思路就是让每个 item 的高度自己去测量，而不是手动指定固定高度。这样即使有图片或者长文本，也能正确计算高度。

简单贴个代码示例：

import React, { useState } from "react";

import { AutoSizer, List, CellMeasurer, CellMeasurerCache } from "react-virtualized";



const VirtualList = ({ items }) => {

  const cache = new CellMeasurerCache({

    fixedWidth: true,

    defaultHeight: 60, // 初始默认高度

  });



  const rowRenderer = ({ index, key, parent, style }) => {

    return (

      
        key={key}

        cache={cache}

        parent={parent}

        columnIndex={0}

        rowIndex={index}

      >

        {({ measure, registerChild }) => (

          

            {items[index]}

          


        )}

      

    );

  };



  return (

    

      {({ height, width }) => (

        
          width={width}

          height={height}

          rowCount={items.length}

          rowHeight={cache.rowHeight}

          rowRenderer={rowRenderer}

        />

      )}

    

  );

};



export default VirtualList;

关键点说一下：
1. CellMeasurerCache 是用来缓存每个 item 的高度，避免重复测量。
2. CellMeasurer 包裹你的 item，会自动测量实际渲染高度。
3. AutoSizer 让容器能自适应宽度和高度。

性能上不用担心，react-virtualized 做得比 react-window 更成熟，尤其是动态高度场景下更稳定。我自己用了这个方案后，滚动体验提升非常明显，再也不会出现错位闪烁的问题。

最后提醒一句，别再去折腾手动计算 offset 或者动态修改 itemSize，太容易出问题了，相信我，我都试过，不值得。

2026-01-30 10:06