快捷導(dǎo)航

Vue打包后滾動(dòng)條異常問題修復(fù)過程

更新時(shí)間：2026年03月24日 08:34:45 作者：藍(lán)胖子的多啦A夢(mèng)

這篇文章主要介紹了Vue打包后滾動(dòng)條異常問題修復(fù)過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問題與修復(fù)總結(jié)（表格）

項(xiàng)目	說明
現(xiàn)象	選設(shè)備彈框，在部分環(huán)境有橫向滾動(dòng)條、可左右滑動(dòng)，在部分環(huán)境無滾動(dòng)條、無法左右滑動(dòng)
環(huán)境差異	開發(fā)環(huán)境正常；打包后在電腦上異常
直接表現(xiàn)	多個(gè)頁面的 ::-webkit-scrollbar { display: none } 在打包后變成全局樣式，把選設(shè)備彈框的橫向滾動(dòng)條也隱藏了

會(huì)出現(xiàn)滾動(dòng)條，可以左右滑動(dòng)，查看所有的信息

不出現(xiàn)滾動(dòng)條，也無法左右滑動(dòng)

因?yàn)橹耙灿羞^類似這樣的問題，是瀏覽器版本過低導(dǎo)致的，升級(jí)一下就可以了。

于是，這次先查看了瀏覽器版本，是否是最新的，是否是樣式不兼容問題，這些都排查了一遍后，發(fā)現(xiàn)，瀏覽器版本升級(jí)為最新的了，樣式也沒有任何問題，

最終，控制臺(tái)-樣式，逐個(gè)逐個(gè)排查，發(fā)現(xiàn)

 ::-webkit-scrollbar {
      display: none;
      /* Safari and Chrome */
    }

這行代碼影響了，去掉就可以了。于是，頁面中開始搜索，但我當(dāng)前頁面并沒有這行代碼呢，開始整個(gè)項(xiàng)目搜索，確實(shí)發(fā)現(xiàn)有幾個(gè)頁面用了。找到問題，就可以修改了?。?！

維度	內(nèi)容
直接原因	其他 4 個(gè)頁面的 index.scss 里寫了 ::-webkit-scrollbar { display: none }，打包后泄漏為全局，作用到選設(shè)備彈框
技術(shù)原因	Vue scoped 對(duì)「僅偽元素」選擇器處理有缺陷，未正確加 [data-v-xxx]，導(dǎo)致樣式變成全局
為何開發(fā)正常、打包異常	開發(fā)時(shí)樣式按 chunk 注入，順序不同；打包后 CSS 合并進(jìn)少量文件，泄漏的全局規(guī)則穩(wěn)定生效

步驟	思路	做法
1	從源頭限定作用范圍	4 個(gè)頁面內(nèi)用 ::v-deep ::-webkit-scrollbar 替代裸的 ::-webkit-scrollbar，使規(guī)則只作用于本頁
2	保證彈框內(nèi)滾動(dòng)條可見	在 deviceDeatil 中為 .dialog-scroll-wrap 單獨(dú)寫 ::-webkit-scrollbar（含 display: block 等），并限定在 .device-detail-dialog 下
3	避免彈框被裁剪	在 deviceDeatil 內(nèi)覆蓋 .el-dialog / .el-dialog__body 的 overflow，改為 visible / overflow-x: visible

文件	修改類型	修改要點(diǎn)
smdBoxMimo/index.scss	限定滾動(dòng)條作用域	::-webkit-scrollbar → 父級(jí)內(nèi) ::v-deep ::-webkit-scrollbar
smdBoxMimoG3/index.scss	同上	同上
multipleSilos/index.scss	同上	同上
nstwokanban/index.scss	同上	同上
neolight/selectDevice/deviceDeatil.vue	彈框滾動(dòng)與樣式	① 滾動(dòng)容器加 -webkit-overflow-scrolling: touch；② 覆蓋 dialog/body 的 overflow；③ 為 .dialog-scroll-wrap 單獨(dú)設(shè)滾動(dòng)條 display: block 及 track/thumb 樣式

項(xiàng)目	說明
結(jié)論	通過「源頭限定偽元素作用域 + 彈框內(nèi)顯式恢復(fù)滾動(dòng)條與 overflow」修復(fù)了打包后滾動(dòng)條被誤隱藏、無法左右滑動(dòng)的問題
后續(xù)注意	在 scoped 里改 ::-webkit-scrollbar 時(shí)，用「父選擇器 + ::v-deep ::-webkit-scrollbar」，避免再次泄漏為全局

新頁面若需隱藏滾動(dòng)條，建議只針對(duì)本頁容器寫，不要寫裸的 `::-webkit-scrollbar`