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

更新时间：2026年03月24日 08:34:45 作者：蓝胖子的多啦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`

总结

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

您可能感兴趣的文章:

vue3.0 CLI - 3.2 路由的初级使用教程
这篇文章主要介绍了vue3.0 CLI - 3.2 - 路由的初级使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
vue3如何直接修改reactive定义的变量
这篇文章主要介绍了vue3如何直接修改reactive定义的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
vue-socket.io接收不到数据问题的解决方法
这篇文章主要介绍了解决vue-socket.io接收不到数据问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vue利用draggable实现多选拖拽效果
这篇文章主要为大家详细介绍了如何利用vue中的draggable插件实现多选拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
vue-video-player 断点续播的实现
这篇文章主要介绍了vue-video-player 断点续播的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-02
Vue3中配置404路由及懒加载的解决过程
这篇文章主要介绍了Vue3中配置404路由及懒加载的解决过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
Vue组件开发初探
本篇文章主要介绍了Vue组件开发初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
分享Vue子组件接收父组件传值的3种方式
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行类型限制、接收数据的同时对数据类型、必要性、默认值进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下
2022-03-03
vue3中7种路由守卫的使用大全举例
最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,下面这篇文章主要给大家介绍了关于vue3中7种路由守卫的使用大全,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue-dplayer 视频播放器实例代码
今天小编就为大家分享一篇vue-dplayer 视频播放器实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11