快捷導(dǎo)航

Vue項目中scrollIntoView導(dǎo)致的布局異常問題解決辦法

更新時間：2026年04月01日 11:02:17 作者：凡凡百煉成仙

scrollIntoView的實現(xiàn)原理是通過調(diào)整滾動容器的滾動位置,使目標(biāo)元素在視口中可見,這篇文章主要介紹了Vue項目中scrollIntoView導(dǎo)致的布局異常問題解決辦法的相關(guān)資料,需要的朋友可以參考下

問題描述

在CBG項目中，當(dāng)用戶點擊保存按鈕提交表單時，頁面會出現(xiàn)布局異常：

頂部導(dǎo)航欄被遮擋
底部出現(xiàn)留白
整個頁面布局錯亂

問題描述

出現(xiàn)的問題：

問題描述_圖2

這個問題出現(xiàn)在合同創(chuàng)建和政策創(chuàng)建頁面，當(dāng)表單驗證失敗時，代碼會嘗試滾動到錯誤的位置，但滾動行為導(dǎo)致了頁面布局的異常。

原因分析

通過分析代碼，我發(fā)現(xiàn)問題的根本原因是使用了 element.scrollIntoView() 方法：

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

scrollIntoView() 方法會影響整個頁面的滾動，而不是只在指定容器內(nèi)部滾動。當(dāng)頁面有固定的導(dǎo)航欄和側(cè)邊欄時，這種滾動方式會導(dǎo)致布局混亂。

布局結(jié)構(gòu)分析

CBG項目的布局結(jié)構(gòu)如下：

頂部固定導(dǎo)航欄
左側(cè)固定側(cè)邊欄
主內(nèi)容區(qū)域（.main-container），帶有垂直滾動條

當(dāng)使用 scrollIntoView() 時，它會滾動整個 document，而不是只在 .main-container 內(nèi)部滾動，從而導(dǎo)致固定元素的布局異常。

解決方案

1. 創(chuàng)建工具函數(shù)

首先，我創(chuàng)建了一個專門的工具函數(shù) scrollToElement，用于在指定容器內(nèi)滾動到指定元素：

// src/utils/scroll-to.js
/**
 * 滾動到指定元素，在指定容器內(nèi)
 * @param {HTMLElement} element 要滾動到的元素
 * @param {HTMLElement|string} container 滾動容器，可以是元素或選擇器
 * @param {number} offset 偏移量，默認(rèn)20
 * @param {number} duration 動畫時長，默認(rèn)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'
  })
}

2. 替換原有滾動邏輯

然后，我在合同創(chuàng)建和政策創(chuàng)建頁面中替換了原有的滾動邏輯：

合同創(chuàng)建頁面：

// 導(dǎo)入工具函數(shù)
import { scrollToElement } from '@/utils/scroll-to'
// 使用工具函數(shù)
const vComponent = vm.proxy.$refs[templateIndex][0]
const dom = vComponent?.$el
if (dom) {
  // 使用工具函數(shù)滾動到指定元素
  scrollToElement(dom, '.main-container', 20)
}

政策創(chuàng)建頁面：

// 導(dǎo)入工具函數(shù)
import { scrollToElement } from '@/utils/scroll-to'
// 使用工具函數(shù)
const dom = vm.$refs[refName]?.$el
if (dom) {
  // 使用工具函數(shù)滾動到指定元素
  scrollToElement(dom, '.main-container', 20)
}