Vue中使用scrollIntoView仅滚动目标div内元素，避免触发全局页面滚动

你遇到的全局页面连带滚动问题，是scrollIntoView API的默认行为导致的：该API执行时会递归触发所有祖先可滚动容器的滚动逻辑，直到目标元素在浏览器顶层视口可见，所以除了Scroll-Div内部滚动外，页面根容器也会跟着滚动。

建议改用直接计算滚动容器偏移量、手动设置滚动位置的方案实现，完全避免触发外部容器滚动，且不需要使用ref，适配你递归组件通过id定位的场景，实现步骤如下：

1. 给你的Scroll-Div容器设置一个唯一id，比如scroll-container，同时确保它已经配置了固定高度、overflow-y: auto的样式（是可独立滚动的容器）
2. 修改goTo函数代码如下：

goTo(id) {
  const targetEl = document.getElementById(`Id-${id}`);
  // 替换为你给Scroll-Div设置的id
  const scrollContainer = document.getElementById('scroll-container');
  if (targetEl && scrollContainer) {
    // 分别获取滚动容器、目标元素的位置信息
    const containerRect = scrollContainer.getBoundingClientRect();
    const targetRect = targetEl.getBoundingClientRect();
    // 计算目标元素滚动到容器可视区居中所需的偏移量
    const scrollOffset = targetRect.top - containerRect.top 
      + scrollContainer.scrollTop 
      - (containerRect.height / 2) 
      + (targetRect.height / 2);
    // 仅操作Scroll-Div的滚动，不会影响外部页面
    scrollContainer.scrollTo({
      top: scrollOffset,
      behavior: 'smooth'
    })
  }
}

• 该方案兼容性优于修改scrollIntoView参数的方案，所有支持scrollTo平滑滚动的浏览器都可以正常运行
• 偏移量计算已经考虑了目标元素本身的高度，最终会把元素垂直居中在Scroll-Div的可视区域内

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