虚拟滚动列表高度计算不准怎么办？

动态高度的虚拟滚动，核心问题在于你没法提前知道高度，所以需要在渲染后去测量。

常见做法是维护一个高度缓存，渲染完量一下实际高度，然后更新缓存供下次滚动时使用。

简单实现思路：

const VirtualList = ({ data, renderItem, estimatedItemHeight = 60 }) => {

  const [heightMap, setHeightMap] = useState({});

  const itemElementMap = useRef({});



  // 测量某个index的高度

  const measureItem = (index) => {

    const el = itemElementMap.current[index];

    if (!el) return;

    const height = el.offsetHeight;

    setHeightMap(prev => {

      if (prev[index] === height) return prev;

      return { ...prev, [index]: height };

    });

  };



  // 渲染item时挂ref

  const renderWrapper = (item, index) => {

    return (

      <div

        ref={el => {

          itemElementMap.current[index] = el;

          // 首次渲染后立即测量

          if (el) requestAnimationFrame(() => measureItem(index));

        }}

        style={{ height: heightMap[index] || estimatedItemHeight }}

      >

        {renderItem(item, index)}

      </div>

    );

  };



  // 计算累计高度

  const getOffset = (index) => {

    let offset = 0;

    for (let i = 0; i < index; i++) {

      offset += heightMap[i] || estimatedItemHeight;

    }

    return offset;

  };



  // ... 后续根据scrollTop计算startIndex、endIndex的逻辑不变

};

几个关键点：

首次渲染时用 estimatedItemHeight 撑开容器，避免白屏。渲染完后用 requestAnimationFrame 测量真实高度并缓存。后续滚动就靠这个缓存算位置。

如果你的item里有图片，图片加载前后高度会变，最好在图片onload时也触发一次测量。

还有一种更省心的方案是直接用现成的库，react-virtualized 或者 react-window 都有动态高度的API，拿去改改就行。自己写的话主要就是这套测量+缓存的逻辑。

这个问题出在你试图在 DOM 渲染之前“预知”高度。对于动态内容（特别是图片），布局是会变的，你写的那个静态估算函数一旦跟真实 DOM 高度对不上，错位是必然的。

要解决不定高度的虚拟滚动，核心思路只有一种：测量并缓存。不要瞎猜，先给个初始估算值渲染，等 item 真正挂载到页面上后，用 ResizeObserver 测出真实高度，然后回写到你的位置记录里，再重新计算总高度。

你可以试试下面这个方案，核心在于维护一个 positions 数组，利用 ResizeObserver 动态更新它。

import React, { useState, useRef, useEffect, useMemo } from 'react';



const DynamicVirtualList = ({ data, estimatedItemHeight = 60 }) => {

  const [scrollOffset, setScrollOffset] = useState(0);

  const containerRef = useRef(null);

  

  // 缓存每个 item 的位置信息 { top, bottom, height, measurement }

  // measurement 标记是否已经测量过真实高度

  const [positions, setPositions] = useState(() => 

    data.map((_, index) => ({

      index,

      top: index * estimatedItemHeight,

      bottom: (index + 1) * estimatedItemHeight,

      height: estimatedItemHeight,

      measurement: false

    }))

  );



  // 更新某个位置的高度信息

  const updatePosition = (index, height) => {

    setPositions((prev) => {

      const newPositions = [...prev];

      // 只有当高度确实变化了才更新，避免死循环

      if (newPositions[index].height !== height) {

        const oldHeight = newPositions[index].height;

        const dHeight = height - oldHeight;

        

        newPositions[index] = { ...newPositions[index], height, measurement: true };

        

        // 更新后面所有 item 的 top/bottom

        for (let i = index + 1; i < newPositions.length; i++) {

          newPositions[i] = {

            ...newPositions[i],

            top: newPositions[i].top + dHeight,

            bottom: newPositions[i].bottom + dHeight

          };

        }

      }

      return newPositions;

    });

  };



  // 监听滚动

  const handleScroll = (e) => {

    setScrollOffset(e.target.scrollTop);

  };



  // 计算可视区域的 startIndex 和 endIndex

  const { visibleData, totalHeight, offsetY } = useMemo(() => {

    const containerHeight = containerRef.current?.clientHeight || 0;

    const startNode = positions.findIndex((p) => p.bottom > scrollOffset);

    const endNode = positions.findIndex((p) => p.top > scrollOffset + containerHeight);

    

    // 扩大渲染范围防止白屏

    const startIndex = Math.max(0, startNode - 2);

    const endIndex = Math.min(positions.length - 1, endNode === -1 ? positions.length - 1 : endNode + 2);

    

    const totalHeight = positions[positions.length - 1]?.bottom || 0;

    const offsetY = positions[startIndex]?.top || 0;



    return {

      visibleData: data.slice(startIndex, endIndex + 1).map((item, i) => ({

        ...item,

        index: startIndex + i

      })),

      totalHeight,

      offsetY

    };

  }, [scrollOffset, positions, data]);



  return (

    

      ref={containerRef} 

      onScroll={handleScroll} 

      style={{ height: '500px', overflow: 'auto', border: '1px solid #ccc' }}

    >

      


        {visibleData.map((item) => {

          const pos = positions[item.index];

          return (

            
              key={item.id}

              ref={(node) => {

                if (node && !pos.measurement) {

                  // 使用 ResizeObserver 监听尺寸变化

                  const resizeObserver = new ResizeObserver((entries) => {

                    for (let entry of entries) {

                      const { height } = entry.contentRect;

                      updatePosition(item.index, height);

                    }

                  });

                  resizeObserver.observe(node);

                  // 清理 observer 防止内存泄漏（实际项目中建议用 useCallback + ref 存储）

                  return () => resizeObserver.disconnect();

                }

              }}

              style={{

                position: 'absolute',

                top: 0,

                left: 0,

                width: '100%',

                transform: translateY(${pos.top}px),

                // 调试看看，加上背景色更容易看清错位

                borderBottom: '1px solid #eee' 

              }}

            >

              {/* 你的动态内容 */}

              


                {item.hasImage && }

                
{item.content}


              


            


          );

        })}