大屏滚动条必须绑定具体容器（如.dashboard-wrapper）并成套定义伪元素，因::-webkit-scrollbar不继承、不全局生效，且firefox/safari需分别用scrollbar-width/scrollbar-color或js兜底。
大屏展示页面的滚动条不能套用普通网页那套写法——它要扛住4K/8K分辨率、适配触控交互、在强光下保持高对比，还不能被系统级滚动策略（比如macOS“自动隐藏”）干掉。直接给 body 写 ::-webkit-scrollbar 基本无效，必须锁定具体容器并强制接管。
为什么给 body 写 ::-webkit-scrollbar 没反应
这不是样式漏了，是浏览器根本不认。大屏页面通常靠一个全屏容器（比如 .dashboard-wrapper）撑满视口并触发滚动，::-webkit-scrollbar 只对设置了 overflow: auto 或 scroll 且内容真正溢出的块级元素生效，不继承、不全局作用。
- 错误写法：
body::-webkit-scrollbar { width: 12px; }—— Chrome/Edge 下大概率静默失效 - 正确做法：显式定义容器，例如
.dashboard-wrapper { height: 100vh; overflow-y: auto; }，再挂伪元素 - 额外注意：
overflow: overlay已废弃，别用；overscroll-behavior: contain在 Safari 上可能干扰触控惯性，得实测
::-webkit-scrollbar 必须成套写才生效
漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 中任意一个，Chrome/Edge 就会整套回退到默认样式——不是“轨道变了但滑块没变”，而是整个自定义逻辑被丢弃。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
::-webkit-scrollbar控制宽高：垂直滚动条设width（建议 10px–16px，太细（如 4px）会被浏览器强制加粗） -
::-webkit-scrollbar-track必须设background，否则轨道透明，和深色大屏底色打架；可加border-radius，但别超宽度一半，否则圆角视觉异常 -
::-webkit-scrollbar-thumb必须设background，否则滑块不可见；:hover和:active状态必须用::-webkit-scrollbar-thumb:hover单独写，普通伪类不生效
Firefox 和 Safari 的兼容处理不能省
Firefox 完全无视 ::-webkit- 系列，只响应 scrollbar-width 和 scrollbar-color，而且这两个属性只对根滚动容器（html 或显式设了 overflow 的块级元素）有效，对嵌套 div 滚动无效。
-
scrollbar-width只接受auto、thin、none；设thick或其他值会被忽略 -
scrollbar-color: #666 #f5f5f5顺序不能反，第二个是轨道色；设transparent会导致轨道消失，但滑块仍可拖（不推荐） - Safari（macOS/iOS）基本不可控：16.4+ 才部分支持
scrollbar-width/scrollbar-color，且系统偏好里开了“自动隐藏滚动条”时，CSS 设置会被无视——这是系统级策略，网页无权覆盖
大屏场景下容易被忽略的细节
触控设备上，滚动条宽度不能只看像素值——12px 在 4K 屏上实际物理尺寸太小，手指难精准拖动；macOS Safari 的手势滚动可能绕过 CSS 样式，导致视觉和行为不一致；还有，scroll-behavior: smooth 在大屏低帧率设备上可能卡顿，得结合 will-change: scroll-position 或降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
