ReactJS（Next.JS）列表如何默认从指定元素开始显示？

方案一：使用React Refs（推荐） #

这种方案更贴合React的组件化设计理念，直接通过Ref获取列表项的DOM引用完成滚动。

实现代码： #

import { useRef, useEffect } from 'react';

const MyList = () => {
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  // 注意：数组索引从0开始，第191个元素对应索引190
  const targetItemIndex = 190;

  useEffect(() => {
    // 确认目标元素存在后执行滚动
    const targetEl = itemRefs.current[targetItemIndex];
    if (targetEl) {
      targetEl.scrollIntoView({
        behavior: 'smooth', // 可选，开启平滑滚动效果
        block: 'start' // 让元素顶部对齐容器视口顶部
      });
    }
  }, []);

  // 列表容器需设置固定高度和overflow:auto，否则会触发页面整体滚动
  return (
    <div style={{ height: '600px', overflow: 'auto' }}>
      {theList.map((e: MyType, index) => (
        <div
          key={e.orderNbr}
          ref={el => itemRefs.current[index] = el}
        >
          <DisplayOneListElement {...e} />
        </div>
      ))}
    </div>
  );
};

方案二：使用DOM ID定位 #

如果不想依赖React Refs，也可以给每个列表项分配唯一ID，通过原生DOM API定位并滚动。

实现代码： #

import { useEffect } from 'react';

const MyList = () => {
  const targetItemIndex = 190;

  useEffect(() => {
    const targetEl = document.getElementById(`list-item-${targetItemIndex}`);
    if (targetEl) {
      targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, []);

  return (
    <div style={{ height: '600px', overflow: 'auto' }}>
      {theList.map((e: MyType, index) => (
        <div
          key={e.orderNbr}
          id={`list-item-${index}`}
        >
          <DisplayOneListElement {...e} />
        </div>
      ))}
    </div>
  );
};

关键注意事项 #

• 若列表数据为异步获取，必须在数据加载完成后执行滚动逻辑，此时需将theList加入useEffect的依赖数组：

  useEffect(() => {
    if (theList.length > targetItemIndex) {
      // 执行滚动操作
    }
  }, [theList]);
  

• 列表容器必须设置固定高度和overflow: auto，否则scrollIntoView会作用于整个页面而非列表内部

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