Vue项目中scrollIntoView导致的布局异常问题解决办法

// 原代码
const dom = vComponent?.$el
if (dom) {
  dom.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

// src/utils/scroll-to.js
/**
 * 滚动到指定元素，在指定容器内
 * @param {HTMLElement} element 要滚动到的元素
 * @param {HTMLElement|string} container 滚动容器，可以是元素或选择器
 * @param {number} offset 偏移量，默认20
 * @param {number} duration 动画时长，默认500
 */
export function scrollToElement(element, container, offset = 20, duration = 500) {
  if (!element) return
  // 获取容器元素
  const containerElement = typeof container === 'string' 
    ? document.querySelector(container) 
    : container
  if (!containerElement) return
  // 计算元素相对于容器的位置
  const domRect = element.getBoundingClientRect()
  const containerRect = containerElement.getBoundingClientRect()
  const scrollTop = containerElement.scrollTop + (domRect.top - containerRect.top) - offset
  // 平滑滚动到指定位置
  containerElement.scrollTo({
    top: scrollTop,
    behavior: 'smooth'
  })
}

// 导入工具函数
import { scrollToElement } from '@/utils/scroll-to'
// 使用工具函数
const vComponent = vm.proxy.$refs[templateIndex][0]
const dom = vComponent?.$el
if (dom) {
  // 使用工具函数滚动到指定元素
  scrollToElement(dom, '.main-container', 20)
}

// 导入工具函数
import { scrollToElement } from '@/utils/scroll-to'
// 使用工具函数
const dom = vm.$refs[refName]?.$el
if (dom) {
  // 使用工具函数滚动到指定元素
  scrollToElement(dom, '.main-container', 20)
}