如何让scrollTo在图片列表重排后执行以解决滚动偏移问题？

问题核心是图片异步加载导致的布局高度变化：当你调用scrollTo时，图片还没完全加载完成，此时列表的实际高度并未被正确计算；等图片加载完毕后，列表内元素的高度会发生变化，进而让滚动位置自动偏移。

下面是几种可行的修复方案：

方案1：等待所有图片加载完成后执行滚动 #

给每个图片绑定onLoad事件，统计加载完成的图片数量，当所有图片都加载完毕后再触发滚动操作。

import { useState, useRef } from 'react';
import { List, ListItem } from '@mui/material';

const YourComponent = () => {
  const [loadedImageCount, setLoadedImageCount] = useState(0);
  const imageList = [/* 你的图片URL数组 */];
  const targetScrollTop = /* 目标滚动位置值 */;
  const listRef = useRef(null);

  const handleImageLoad = () => {
    setLoadedImageCount(prev => {
      const newCount = prev + 1;
      // 所有图片加载完成后执行滚动
      if (newCount === imageList.length && listRef.current) {
        listRef.current.scrollTo({ top: targetScrollTop });
      }
      return newCount;
    });
  };

  return (
    <List ref={listRef} style={{ overflow: 'auto', maxHeight: 'xxxpx' }}>
      {imageList.map((url, index) => (
        <ListItem key={index}>
          <img
            src={url}
            style={{ maxWidth: '25%' }}
            onLoad={handleImageLoad}
            // 避免图片加载失败导致统计错误
            onError={handleImageLoad}
          />
        </ListItem>
      ))}
    </List>
  );
};

方案2：给图片添加固定比例的占位容器 #

如果你的图片有固定的宽高比，可以提前给图片容器设置占位高度，避免图片加载后改变布局。比如图片是4:3比例，max-width设为25%，那么占位容器的padding-bottom应为25% * 3/4 = 18.75%：

<ListItem>
  <div style={{ 
    position: 'relative', 
    maxWidth: '25%', 
    height: 0, 
    paddingBottom: '18.75%' // 根据你的图片比例调整
  }}>
    <img
      src={imageUrl}
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover' // 按需调整图片适配方式
      }}
    />
  </div>
</ListItem>

这种方式下，即便图片未加载，容器已经占据了正确的高度，scrollTo执行时的列表高度就是最终高度，不会出现偏移。

方案3：监听列表高度变化，自动修正滚动位置 #

如果无法提前确定图片的宽高比，可以使用ResizeObserver监听列表容器的高度变化，当高度发生改变时重新执行滚动：

import { useEffect, useRef } from 'react';
import { List } from '@mui/material';

const YourComponent = () => {
  const listRef = useRef(null);
  const targetScrollTop = /* 目标滚动位置值 */;

  useEffect(() => {
    const listElement = listRef.current;
    if (!listElement) return;

    const resizeObserver = new ResizeObserver(() => {
      listElement.scrollTo({ top: targetScrollTop });
    });
    resizeObserver.observe(listElement);

    return () => resizeObserver.unobserve(listElement);
  }, [targetScrollTop]);

  return (
    <List ref={listRef} style={{ overflow: 'auto', maxHeight: 'xxxpx' }}>
      {/* 列表项和图片 */}
    </List>
  );
};

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