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`

总结

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

您可能感兴趣的文章:

Vue ElementUI table实现双击修改编辑某个内容的方法
在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善
2024-09-09
vue使用recorder.js实现录音功能
这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
vue+vant实现购物车全选和反选功能
这篇文章主要为大家详细介绍了vue+vant实现购物车全选和反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
Vue.js轮播图走马灯代码实例（全）
这篇文章主要介绍了Vue.js轮播图走马灯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
35个最好用的Vue开源库(史上最全)
无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。本文主要介绍了35个最好用的Vue开源库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
前端JS也可以连点成线详解(Vue中运用AntVG6)
这篇文章主要给大家介绍了关于前端JS连点成线(Vue中运用 AntVG6)的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-01-01
Vue的自定义事件之组件通信工具详解
这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
2023-10-10
Vue路由配置方法详细介绍
Vue3和Vue2基本差不多，只不过需要将createRouter、createWebHistory从vue-router中引入，再进行使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
巧妙运用v-model实现父子组件传值的方法示例
这篇文章主要介绍了巧妙运用v-model实现父子组件传值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
vue使用wavesurfer.js解决音频可视化播放问题
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件，今天重点给大家介绍下vue使用wavesurfer.js解决音频可视化播放问题，感兴趣的朋友一起看看吧
2022-04-04