根本原因是::-webkit-scrollbar和scrollbar-color不继承、不全局生效，只对当前有overflow且实际溢出的元素起作用；标签页切换后新内容容器未显式设置对应滚动条样式规则，或未触发溢出判定。
多标签页切换时滚动条样式重置，本质不是“样式被重置”，而是滚动条样式未绑定到正确容器或未覆盖所有触发滚动的上下文——常见于 SPA 中用 router-view 或 tab-pane 切换内容后，新内容块未继承原滚动样式，或 Firefox/WebKit 规则作用域失效。
为什么切换标签页后自定义滚动条消失了
根本原因在于 ::-webkit-scrollbar 和 scrollbar-color 都不继承、不全局生效，只对「当前有 overflow 且实际溢出」的元素起作用。标签页切换常伴随以下情况：
- 新标签页内容渲染在全新 DOM 节点（如
<div class="tab-content">），但没给它加::-webkit-scrollbar规则 - 旧标签页被
display: none或v-if移除，其样式规则随之失效；新标签页节点是动态插入，CSS 未命中 - Firefox 的
scrollbar-color只对设置了overflow的块级元素有效，若新内容块没显式设overflow-y: auto，该属性直接被忽略 - 某些 UI 框架（如 Element Plus 的
el-tab-pane）内部用transform或visibility: hidden切换，导致滚动容器尺寸计算异常，浏览器判定“无需滚动”，样式链中断
必须绑定到具体滚动容器，不能只写 body
直接给 body 写 ::-webkit-scrollbar 在标签页场景下基本无效：SPA 页面通常禁用 body 滚动（body { overflow: hidden }），所有滚动由各 tab 内容区独立承担。
- 每个可滚动的标签页容器（如
.tab-panel、.content-wrapper）都需单独配一套::-webkit-scrollbar规则 - 规则必须成套出现：
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb，漏一个就回退默认 -
::-webkit-scrollbar必须设width（垂直）或height（水平），否则整套失效；建议统一用width: 8px - Firefox 需为同一容器额外加
scrollbar-width: thin和scrollbar-color，例如：.tab-panel { scrollbar-width: thin; scrollbar-color: #666 #f5f5f5; }
Vue/React 中动态内容的样式注入时机问题
框架组件挂载后才生成 DOM，但 CSS 是静态加载的。如果样式只写在父组件或全局 CSS 中，可能因选择器权重或作用域限制，无法命中动态插入的子容器。
立即学习“前端免费学习笔记（深入）”；
- 在组件级 CSS 中直接写作用于本组件滚动容器的选择器，例如 Vue 的
<style scoped>里写.content-wrapper::-webkit-scrollbar—— 注意scoped会加属性选择器，可能破坏伪元素匹配，应改用<style>（非 scoped）或使用:deep() - React 中若用 CSS Modules，避免把滚动条规则写在模块文件里；应提至全局 CSS 或用
createGlobalStyle（styled-components）注入 - 不要依赖「父容器样式透传」：即使父容器设了
scrollbar-color，子div不显式声明就不会生效 - 调试时检查 computed 样式，确认目标元素上是否真有
scrollbar-width和scrollbar-color值，而不是只看 styles 面板里有没有那行 CSS
隐藏滚动条但仍可滚动的陷阱
有些设计要求“无滚动条视觉，但保持滚动功能”，常用 overflow: overlay（已废弃）或 padding-right 补偿 + margin-right 负值遮盖。这些方案在标签页切换中极易崩坏：
-
overflow: overlay在 Chrome 120+ 已完全移除，Safari 从未支持，别再用 - 靠
padding/margin遮滚动条，依赖精确尺寸计算，切换标签页后内容高度变化，补偿值立刻失效，出现横向滚动或内容截断 - 真正可靠的做法是：保留滚动条结构，仅用 CSS 隐藏滑块轨道（如
::-webkit-scrollbar { width: 0 }），同时确保容器仍有overflow-y: auto—— 这样滚动仍可用，且不破坏布局流 - 若必须彻底隐藏，优先用 JS 检测滚动状态再显示（如 simplebar 的
autoHide），而非纯 CSS 掩盖
最易被忽略的一点：滚动条样式不是“设置一次就完事”的静态配置，而是随容器存在而存在、随溢出状态而激活的运行时行为。标签页切换的本质是 DOM 替换或显隐切换，必须让每一块新内容都“自带滚动条样式能力”，而不是指望它从父级继承或全局污染。
