autoprefixer 对 ::-webkit-scrollbar 无效，因其仅为 webkit 专有伪元素，非标准 css 属性，不被 autoprefixer 识别或处理；跨浏览器需分层适配：webkit 用伪元素、firefox 用 scrollbar-color/width、ie 依赖 js 方案。
PostCSS 本身不处理滚动条样式，Autoprefixer 对 ::-webkit-scrollbar 类伪元素完全无感知——它既不加前缀，也不生成 fallback，更不会转译成 Firefox 或 IE 兼容语法。
为什么 Autoprefixer 对 ::-webkit-scrollbar 完全无效？
Autoprefixer 只作用于标准 CSS 属性（如 transform、display、gap），而 ::-webkit-scrollbar 及其子伪元素（::-webkit-scrollbar-thumb、::-webkit-scrollbar-track）是 WebKit 专有扩展语法，不属于 CSS 标准，caniuse 数据库中无对应兼容表，Autoprefixer 根本不识别它们。
常见错误现象：
- 写了
::-webkit-scrollbar { width: 8px; }，期望 PostCSS 自动补::-moz-scrollbar→ 实际不会生成任何新规则 - 在
postcss.config.js里配了browserslist: ["Chrome >= 90", "Safari >= 14.1"]→ 不影响伪元素处理，因为 Autoprefixer 压根不扫描这些选择器 - 用 Tailwind +
tailwind-scrollbar插件后仍看不到效果 → 很可能漏了scrollbar启用类，或容器未触发溢出
如何让自定义滚动条真正跨浏览器生效？
没有“自动跨浏览器”的方案，只有分层适配策略。Firefox 支持 scrollbar-color 和 scrollbar-width，IE 完全不支持任何原生滚动条定制，WebKit 浏览器才认 ::-webkit-scrollbar。必须手动组合：
- 对 WebKit：保留完整
::-webkit-scrollbar规则链（track+thumb+corner） - 对 Firefox：显式写
scrollbar-color: #888 #f1f1f1;和scrollbar-width: thin;，并确保该样式作用于有overflow的具体容器（非html或body） - 对旧版浏览器（IE10/11）：放弃原生滚动条定制，改用 JS 方案（如
simplebar或overlay-scrollbars），或接受默认样式 - 避免在
@supports中包裹::-webkit-scrollbar—— 它本身不是可检测属性，且 IE 直接忽略整个块
Vite / Webpack 下的 CSS 文件是否真流经 PostCSS？
很多“滚动条没样式”的问题，根源是 CSS 根本没进 PostCSS 管道，导致你写的 ::-webkit-scrollbar 规则被构建工具跳过或压缩丢弃。
- Vite 5+ 默认启用 PostCSS，但若你在
vite.config.js中写了css.postcss字段，会覆盖默认配置 → 删掉该字段，或确保它显式包含autoprefixer（尽管对滚动条无用，但能验证管道通畅） - Webpack 必须确认
postcss-loader在css-loader之后，且css-loader的importLoaders≥ 1，否则@import的滚动条样式文件不会被处理 - 实操验证法：在
postcss.config.js的plugins数组里临时加一行require('missing-plugin')，启动构建 —— 若不报错，说明该文件根本没被读取 - Vue 单文件组件中，
<style lang="postcss"></style>才走 PostCSS；普通<style></style>块依赖vue-style-loader链路是否含postcss-loader
最易被忽略的是「伪元素作用域」：哪怕所有配置都对，::-webkit-scrollbar 也只对设置了 overflow: auto|scroll 且内容实际溢出的**具体容器元素**生效；给 body 加，Safari 下大概率失效，因为 WebKit 对根元素的伪元素支持不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
