Vue打包后滚动条异常问题修复过程

2026-03-24 08:34:46 作者：蓝胖子的多啦A梦

这篇文章主要介绍了Vue打包后滚动条异常问题修复过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题与修复总结（表格）

项目	说明
现象	选设备弹框，在部分环境有横向滚动条、可左右滑动，在部分环境无滚动条、无法左右滑动
环境差异	开发环境正常；打包后在电脑上异常
直接表现	多个页面的 ::-webkit-scrollbar { display: none } 在打包后变成全局样式，把选设备弹框的横向滚动条也隐藏了

会出现滚动条，可以左右滑动，查看所有的信息

不出现滚动条，也无法左右滑动

因为之前也有过类似这样的问题，是浏览器版本过低导致的，升级一下就可以了。

于是，这次先查看了浏览器版本，是否是最新的，是否是样式不兼容问题，这些都排查了一遍后，发现，浏览器版本升级为最新的了，样式也没有任何问题，

最终，控制台-样式，逐个逐个排查，发现

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

这行代码影响了，去掉就可以了。于是，页面中开始搜索，但我当前页面并没有这行代码呢，开始整个项目搜索，确实发现有几个页面用了。找到问题，就可以修改了！！！

维度	内容
直接原因	其他 4 个页面的 index.scss 里写了 ::-webkit-scrollbar { display: none }，打包后泄漏为全局，作用到选设备弹框
技术原因	Vue scoped 对「仅伪元素」选择器处理有缺陷，未正确加 [data-v-xxx]，导致样式变成全局
为何开发正常、打包异常	开发时样式按 chunk 注入，顺序不同；打包后 CSS 合并进少量文件，泄漏的全局规则稳定生效

步骤	思路	做法
1	从源头限定作用范围	4 个页面内用 ::v-deep ::-webkit-scrollbar 替代裸的 ::-webkit-scrollbar，使规则只作用于本页
2	保证弹框内滚动条可见	在 deviceDeatil 中为 .dialog-scroll-wrap 单独写 ::-webkit-scrollbar（含 display: block 等），并限定在 .device-detail-dialog 下
3	避免弹框被裁剪	在 deviceDeatil 内覆盖 .el-dialog / .el-dialog__body 的 overflow，改为 visible / overflow-x: visible

文件	修改类型	修改要点
smdBoxMimo/index.scss	限定滚动条作用域	::-webkit-scrollbar → 父级内 ::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 单独设滚动条 display: block 及 track/thumb 样式

项目	说明
结论	通过「源头限定伪元素作用域 + 弹框内显式恢复滚动条与 overflow」修复了打包后滚动条被误隐藏、无法左右滑动的问题
后续注意	在 scoped 里改 ::-webkit-scrollbar 时，用「父选择器 + ::v-deep ::-webkit-scrollbar」，避免再次泄漏为全局

新页面若需隐藏滚动条，建议只针对本页容器写，不要写裸的 `::-webkit-scrollbar`

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。