移动端 chrome 的 ::-webkit-scrollbar 根本不起作用，因为 android 版 chrome（含 webview）从未实现该伪元素，仅解析不渲染；仅 windows/macos chrome/edge（90+）、macos safari（15.4+）、ios safari（16.4+，限普通 div）支持，且存在诸多限制。
移动端 Chrome 的 ::-webkit-scrollbar 为什么根本不起作用
因为 Android 版 Chrome（包括 WebView）从不真正支持 ::-webkit-scrollbar 伪元素——它被解析、不报错，但样式不会渲染到滚动条上。你看到 DevTools 里有该规则、computed 值也显示正常，真机一跑就是原生灰色细条，甚至完全不显示。这不是选择器写错、没加 !important 或父容器 overflow 没设对，而是浏览器压根没实现这个 API。
哪些平台能用 ::-webkit-scrollbar，哪些不能
只在以下环境稳定生效：
- Chrome / Edge（Windows/macOS，
90+版本） - macOS Safari（
15.4+） - iOS Safari（
16.4+，但仅对普通<div> 容器有效，<code>、<textarea></textarea>、uni-app 的scroll-view等基本无效）明确不支持的场景包括：
- Android Chrome（所有版本）
- Android WebView（绝大多数混合 App 内嵌环境）
- 旧版 iOS Safari（
16.4之前） - Firefox（完全无视，只认
scrollbar-width和scrollbar-color）
移动端真要控制滚动条外观，只能绕开原生机制
别试图用
::-webkit-scrollbar在移动端“打补丁”，它不是兼容性问题，是功能缺失。可行路径只有一条：禁用原生滚动行为，自己画一个可控的滚动条 UI，并用 JS 同步位置。- 先用
overscroll-behavior: contain防止弹窗滚动时背景页跟着动 - 给容器设
overflow: hidden，再用touchstart/touchmove+scrollTop手动控制滚动 - 用绝对定位画出轨道和滑块，尺寸按
container.clientHeight / container.scrollHeight动态计算 - 监听
scroll事件更新滑块位置，或用requestAnimationFrame做平滑同步 - 注意 iOS Safari 的
position: fixed在滚动中可能跳变，优先用transform: translateY()
Chrome 120+ 还有个隐藏限制：非 HTTPS 下直接禁用伪元素
即使你在桌面 Chrome 调试时看到滚动条样式生效，一旦部署到 HTTP 或
file://协议下，::-webkit-scrollbar会被静默忽略——控制台无报错，DevTools 里样式灰掉，就像没写过一样。- 开发阶段必须走
localhost（Chrome 120+ 已信任） - 上线环境强制 HTTPS，HTTP 页面一律 fallback 到原生样式
-
::-webkit-scrollbar不支持 CSS 变量、calc()、var(--color)，所有宽高颜色都得写死 - 别给
::-webkit-scrollbar-thumb加box-shadow或filter，滚动会卡顿
移动端滚动条样式本质是浏览器厂商没统一实现的边缘能力，真要跨端一致，就得接受「桌面精细控制、移动端降级或自绘」这个现实。别在 Android Chrome 里调试
::-webkit-scrollbar-track——它不会出现，不是你漏写了某行 CSS。
