快捷導(dǎo)航

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

更新時間：2026年03月24日 08:34:45 作者：藍胖子的多啦A夢

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

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

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

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

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

因為之前也有過類似這樣的問題，是瀏覽器版本過低導(dǎo)致的，升級一下就可以了。

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

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

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

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

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

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

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

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

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