React中调用scrollIntoView无法同时滚动多元素？求排查方案

首先明确两个核心场景：

场景1：多个元素在同一个滚动容器内 #

这种情况不可能实现同时滚动——因为单个滚动容器只能有一个滚动位置，同时调用多个scrollIntoView时，后续的调用会覆盖之前的滚动指令，最终只有最后执行的那个（或因浏览器队列机制保留第一个）生效。逻辑上也不存在让同一容器同时处于多个滚动位置的可能，你只能选择滚动到其中一个元素，或者调整容器滚动位置让所有目标元素同时可见（比如计算所有元素的上下边界，设置容器scrollTop到合适值）。

场景2：多个元素在不同的滚动容器内 #

这种情况可以实现同时滚动，但默认直接批量调用scrollIntoView({behavior: "smooth"})会失效，原因是浏览器的平滑滚动动画依赖主线程调度，同一帧内触发的多个平滑滚动请求会被合并或覆盖，导致只有第一个执行。

解决方案1：用requestAnimationFrame错开触发时机 #

通过将每个滚动请求分配到不同的动画帧执行，避免浏览器合并请求：

// 假设你有多个ref存在数组中
const targetRefs = [ref1, ref2, ref3];

targetRefs.forEach(ref => {
  requestAnimationFrame(() => {
    ref.current?.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
  });
});

解决方案2：使用Web Animations API手动控制滚动动画 #

绕过scrollIntoView的默认队列限制，直接给每个滚动容器的scrollTop/scrollLeft属性添加独立动画，实现并行滚动：

function smoothScrollToElement(ref) {
  const element = ref.current;
  if (!element) return;

  // 这里假设元素的直接父元素是滚动容器，根据实际情况调整
  const scrollContainer = element.parentElement;
  if (!scrollContainer) return;

  // 计算需要滚动的距离
  const elementOffsetTop = element.offsetTop;
  const currentScrollTop = scrollContainer.scrollTop;
  const targetScrollTop = elementOffsetTop;

  // 创建滚动动画
  scrollContainer.animate(
    [{ scrollTop: currentScrollTop }, { scrollTop: targetScrollTop }],
    {
      duration: 300, // 自定义动画时长
      easing: "ease-in-out", // 自定义缓动效果
      fill: "forwards" // 动画结束后保持最终状态
    }
  );
}

// 调用多个滚动
smoothScrollToElement(ref1);
smoothScrollToElement(ref2);

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture