能否在待可见单元格渲染完成后调用scrollToIndex方法？

核心思路 #

要避免快速滚动出现空白，关键是等待目标单元格的DOM节点完全渲染（包含尺寸计算完成）后，再执行滚动定位。以下分原生JS、React、Vue三种常见场景给出具体实现：

原生JS场景 #

利用MutationObserver监听滚动容器内的DOM变化，当目标单元格出现且渲染完成时触发滚动：

const targetCellId = "target-cell";
const scrollContainer = document.getElementById("scroll-container");
let hasTriggeredScroll = false;

// 监听容器内DOM节点新增/移除
const observer = new MutationObserver((mutations) => {
  const targetCell = document.getElementById(targetCellId);
  if (targetCell && !hasTriggeredScroll) {
    // 通过offsetHeight判断单元格是否完成渲染
    if (targetCell.offsetHeight > 0) {
      targetCell.scrollIntoView({ behavior: "smooth", block: "start" });
      hasTriggeredScroll = true;
      observer.disconnect(); // 完成后停止监听，避免性能消耗
    }
  }
});

observer.observe(scrollContainer, { childList: true, subtree: true });

// 提前检查目标单元格是否已存在并渲染
const existingCell = document.getElementById(targetCellId);
if (existingCell && existingCell.offsetHeight > 0) {
  existingCell.scrollIntoView({ behavior: "smooth", block: "start" });
  hasTriggeredScroll = true;
  observer.disconnect();
}

React场景（含虚拟列表） #

如果使用虚拟列表库（如react-window），直接利用库自带的渲染回调；普通列表则结合useRef与useLayoutEffect：

虚拟列表示例（react-window） #

import { FixedSizeList as List } from "react-window";
import { useRef, useState } from "react";

function TargetScrollList({ items, targetIndex }) {
  const listRef = useRef(null);
  const [isTargetRendered, setIsTargetRendered] = useState(false);

  // 监听可见行渲染完成事件
  const handleRowsRendered = ({ visibleStartIndex, visibleStopIndex }) => {
    if (
      targetIndex >= visibleStartIndex &&
      targetIndex <= visibleStopIndex &&
      !isTargetRendered
    ) {
      listRef.current.scrollToItem(targetIndex);
      setIsTargetRendered(true);
    }
  };

  return (
    <List
      ref={listRef}
      height={500}
      itemCount={items.length}
      itemSize={50}
      onRowsRendered={handleRowsRendered}
    >
      {({ index, style }) => (
        <div style={style} id={`cell-${index}`}>
          {items[index]}
        </div>
      )}
    </List>
  );
}

普通列表示例 #

import { useRef, useLayoutEffect, useState } from "react";

function NormalList({ items, targetIndex }) {
  const targetCellRef = useRef(null);
  const [isReadyToScroll, setIsReadyToScroll] = useState(false);

  useLayoutEffect(() => {
    if (targetCellRef.current && !isReadyToScroll) {
      // useLayoutEffect确保DOM更新后同步执行
      if (targetCellRef.current.offsetHeight > 0) {
        targetCellRef.current.scrollIntoView({ behavior: "smooth" });
        setIsReadyToScroll(true);
      }
    }
  }, [items]);

  return (
    <div className="scroll-container">
      {items.map((item, index) => (
        <div
          key={index}
          ref={index === targetIndex ? targetCellRef : null}
          className="cell"
        >
          {item}
        </div>
      ))}
    </div>
  );
}

Vue场景 #

结合$nextTick与DOM引用，等待单元格渲染完成后触发滚动：

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div
      v-for="(item, index) in items"
      :key="index"
      :ref="index === targetIndex ? 'targetCell' : null"
      class="cell"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      targetIndex: 100,
      hasScrolled: false,
    };
  },
  mounted() {
    // 等待初始DOM渲染完成
    this.$nextTick(() => this.checkAndScroll());
    // 监听数据源变化，异步加载后重新检查
    this.$watch("items", () => {
      this.$nextTick(() => this.checkAndScroll());
    });
  },
  methods: {
    checkAndScroll() {
      if (this.hasScrolled) return;
      const targetCell = this.$refs.targetCell?.[0];
      if (targetCell && targetCell.offsetHeight > 0) {
        targetCell.scrollIntoView({ behavior: "smooth", block: "start" });
        this.hasScrolled = true;
      }
    },
  },
};
</script>

关键注意点 #

1. 避免重复触发：添加标记位（如hasScrolled），防止滚动逻辑多次执行。
2. 渲染状态判断：通过offsetHeight/offsetWidth判断单元格是否完成渲染（仅存在DOM节点可能还处于未加载样式的状态）。
3. 虚拟列表优先用库回调：虚拟列表库的onRowsRendered/itemsRendered等回调是最可靠的渲染完成信号，无需手动监听DOM。

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