要还原chrome默认滚动条，需禁用或删除::-webkit-scrollbar相关css规则，或执行重置脚本、禁用overlay scrollbars、屏蔽源头css文件。
当你在网页中看到异常粗大、颜色突兀或带圆角的滚动条，说明页面已通过 CSS 注入了自定义滚动条样式，而你想彻底还原 Chrome 默认的细窄灰色滚动条——这不是清空缓存或重启浏览器能解决的问题，必须从样式层面对症清除。
直接禁用 WebKit 滚动条伪元素
第一步：打开开发者工具（Windows/Linux 按 F12，Mac 按 Cmd+Option+I）→ 切换到 Elements 面板 → 在左上角点击“选择元素”图标（箭头图标），然后点选页面任意可滚动区域（如 body、main、.content 等）。
第二步：在右侧 Styles 面板中，逐行检查是否出现以 ::-webkit-scrollbar 开头的规则。只要存在，哪怕只有一行 width: 12px 或 background: #007bff，就会覆盖默认样式。
第三步：找到后，直接点击该 CSS 规则左侧的复选框将其取消勾选；若该规则来自内联 style 或第三方库（如某些 UI 组件框架），需在 Elements 面板中右键对应标签 → 选择 Delete element 或手动删掉 style 属性中的相关声明。
第四步：若页面使用了 scoped 样式（如 Vue 单文件组件）或 Shadow DOM，需切换到对应作用域的 Styles 区域再查找；【注意：仅禁用 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 不够，必须同时禁用 ::-webkit-scrollbar 本身，否则 width/height 仍会生效】。
全局重置滚动条为系统默认
方法一：在控制台执行强制重置脚本
在开发者工具的 Console 面板中，粘贴并回车运行以下代码：
const style = document.createElement('style'); style.textContent = `::-webkit-scrollbar { width: auto !important; height: auto !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background: #c1c1c1 !important; border-radius: 0 !important; }`; document.head.appendChild(style);
这段代码会动态注入高优先级样式，覆盖所有已存在的自定义规则，让滚动条宽度回归系统默认值（通常为 12px 垂直 + 12px 水平），且不破坏滚动功能。
方法二：禁用 Chrome 实验性 Overlay Scrollbars（仅适用于滚动条突然变极细或消失）
在新标签页地址栏输入 chrome://flags/#overlay-scrollbars → 将状态改为 Disabled → 点击右下角 Relaunch 重启浏览器。此操作会关闭 Chrome 113+ 版本默认启用的“叠加滚动条”，使滚动条恢复传统渲染模式，从而绕过部分 JS 动态注入的样式劫持。
定位并移除源头 CSS 文件
第一步：回到 Elements 面板 → 右键目标滚动容器 → 选择 Break on > attribute modification → 然后手动滚动页面。一旦页面 JS 修改了该元素的 style 或类名，调试器会自动暂停。
第二步：在 Sources 面板的暂停堆栈中，向上追溯调用栈，找到触发样式的 JS 文件（常见于 theme.css、custom-scrollbar.js 或第三方 UI 库的入口文件）。
第三步：在 Network 面板中筛选 css 类型 → 刷新页面 → 查看加载顺序靠后的 CSS 文件（尤其是含 “scroll”、“bar”、“ui-kit” 字样的）→ 右键该文件 → 选择 Block request URL。这能即时阻止样式注入，验证是否为该文件导致。
第四步：若确认是某 CSS 文件所致，可在本地开发环境中搜索项目代码，定位类似 ::-webkit-scrollbar { 的字符串，直接删除整段规则块；生产环境无法修改源码时，可用用户样式插件（如 Stylus）注入 ::-webkit-scrollbar { all: unset !important; } 强制剥离。
