問(wèn)題描述

在CBG項(xiàng)目中，當(dāng)用戶(hù)點(diǎn)擊保存按鈕提交表單時(shí)，頁(yè)面會(huì)出現(xiàn)布局異常：

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

出現(xiàn)的問(wèn)題：

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

原因分析

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

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

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

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

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

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

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

解決方案

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

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

// src/utils/scroll-to.js
/**
 * 滾動(dòng)到指定元素，在指定容器內(nèi)
 * @param {HTMLElement} element 要滾動(dòng)到的元素
 * @param {HTMLElement|string} container 滾動(dòng)容器，可以是元素或選擇器
 * @param {number} offset 偏移量，默認(rèn)20
 * @param {number} duration 動(dòng)畫(huà)時(shí)長(zhǎng)，默認(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
  // 計(jì)算元素相對(duì)于容器的位置
  const domRect = element.getBoundingClientRect()
  const containerRect = containerElement.getBoundingClientRect()
  const scrollTop = containerElement.scrollTop + (domRect.top - containerRect.top) - offset
  // 平滑滾動(dòng)到指定位置
  containerElement.scrollTo({
    top: scrollTop,
    behavior: 'smooth'
  })
}

2. 替換原有滾動(dòng)邏輯

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

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

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

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

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

技術(shù)原理

新的解決方案使用了以下技術(shù)原理：

1. 容器內(nèi)滾動(dòng)：通過(guò)獲取 .main-container 元素，只在主內(nèi)容區(qū)域內(nèi)滾動(dòng)，不影響頁(yè)面其他部分
2. 相對(duì)位置計(jì)算：使用 getBoundingClientRect() 計(jì)算元素相對(duì)于容器的位置
3. 平滑滾動(dòng)：使用 scrollTo() 方法實(shí)現(xiàn)平滑滾動(dòng)效果
4. 偏移量調(diào)整：添加偏移量使?jié)L動(dòng)位置更加合理，避免元素緊貼容器頂部

代碼優(yōu)化

為了提高代碼的可維護(hù)性和復(fù)用性，我將滾動(dòng)邏輯提取到了工具函數(shù)中，這樣：

1. 代碼復(fù)用：任何需要滾動(dòng)到指定元素的地方都可以使用這個(gè)函數(shù)
2. 維護(hù)性：集中管理滾動(dòng)邏輯，便于后續(xù)修改和維護(hù)
3. 一致性：確保整個(gè)項(xiàng)目中滾動(dòng)行為的一致性
4. 可讀性：使用工具函數(shù)使代碼更加簡(jiǎn)潔易讀

修復(fù)后效果：

總結(jié)

通過(guò)分析 scrollIntoView() 方法的局限性，我實(shí)現(xiàn)了一個(gè)更加靈活的滾動(dòng)解決方案，解決了布局異常問(wèn)題。這個(gè)方案不僅修復(fù)了當(dāng)前的bug，還為項(xiàng)目提供了一個(gè)可復(fù)用的滾動(dòng)工具函數(shù)，提高了代碼的質(zhì)量和可維護(hù)性。

在處理類(lèi)似的滾動(dòng)需求時(shí)，我們應(yīng)該考慮：

• 滾動(dòng)的范圍（整個(gè)頁(yè)面還是指定容器）
• 滾動(dòng)的方式（平滑還是瞬間）
• 滾動(dòng)的位置（頂部、底部還是居中）
• 對(duì)頁(yè)面布局的影響

通過(guò)合理的滾動(dòng)實(shí)現(xiàn)，可以提升用戶(hù)體驗(yàn)，避免布局異常問(wèn)題的發(fā)生。

后續(xù)建議

1. 在項(xiàng)目中統(tǒng)一使用 scrollToElement 工具函數(shù)處理滾動(dòng)需求
2. 對(duì)于復(fù)雜的滾動(dòng)場(chǎng)景，可以擴(kuò)展工具函數(shù)，添加更多參數(shù)和功能
3. 在測(cè)試過(guò)程中，關(guān)注不同瀏覽器和設(shè)備上的滾動(dòng)行為一致性
4. 考慮添加滾動(dòng)動(dòng)畫(huà)效果，提升用戶(hù)體驗(yàn)

這個(gè)解決方案不僅解決了當(dāng)前的bug，也為項(xiàng)目的后續(xù)開(kāi)發(fā)提供了一個(gè)實(shí)用的工具函數(shù)，體現(xiàn)了代碼復(fù)用和模塊化的設(shè)計(jì)思想。

到此這篇關(guān)于Vue項(xiàng)目中scrollIntoView導(dǎo)致的布局異常問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)Vue scrollIntoView布局異常內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論