滚动条样式无法用内联style属性设置，::-webkit-scrollbar必须写在块或外部css中；firefox需单独配置scrollbar-width和scrollbar-color；不设overflow则滚动条不会出现。
直接说结论：滚动条样式无法用内联 style 属性写，::-webkit-scrollbar 必须进 <style></style> 块或外部 CSS；Firefox 需单独配 scrollbar-width 和 scrollbar-color；不设 overflow 就根本不会出现滚动条。
为什么 style="" 里写 ::-webkit-scrollbar 没反应
CSS 伪元素语法（比如 ::-webkit-scrollbar）根本不被 HTML 的 style 属性支持。浏览器只认普通属性值，如 color: red，碰到选择器或冒号开头的规则会直接跳过。
- 你在
<div style="::-webkit-scrollbar { width: 8px; }"> 里硬塞，DevTools 根本不显示这条规则 <li>用 JS 写 <code>element.style.cssText = "::webkit-scrollbar { ... }"同样无效——style对象只管内联样式，不管选择器 - 哪怕你把整个 CSS 字符串塞进去，浏览器解析时也会静默丢弃，不报错也不生效
- 正确做法是限定作用域，例如
.chat-log::-webkit-scrollbar，只影响那个容器 - 必须配合
overflow-y: auto或scroll才能触发滚动条渲染，漏掉这句就等于没写 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb也得写在同一选择器链下，否则可能不匹配 - Firefox 完全无视这些 WebKit 规则，得额外加
scrollbar-width: thin和scrollbar-color: #c0c0c0 #f5f5f5 - 推荐用透明 + 固定宽度：先设
.chat-log::-webkit-scrollbar { width: 8px; }，再让轨道和滑块background: transparent - hover 时只改
background颜色，不改尺寸，避免重排 - 搭配
scrollbar-gutter: stable（加在容器上），可预留滚动条位置，防止内容随滚动条显隐而跳动 - 若要彻底隐藏但保留滚动能力，用
overflow-y: overlay（仅 Safari 支持），或 JS 监听scroll事件动态 toggle 类
::-webkit-scrollbar 必须跟选择器绑定，不能全局乱用
写成 ::-webkit-scrollbar（无前缀）会作用于整个页面所有可滚动区域，包括 、<textarea></textarea>、自定义容器，极易误伤。
滚动条“悬浮隐藏”怎么写才不抖动
常见错误是设 width: 0 再 hover 恢复，但会导致布局重排——宽度从 0 变成 8px，内容会左右晃动。
最易忽略的是：Firefox 和 Safari 对 scrollbar-color 的支持程度不同，Safari 16.4+ 才开始部分支持，且不响应 scrollbar-width: none；真要全兼容，要么接受默认样式，要么引入轻量 JS 方案（如 simplebar），别指望纯 CSS 一招通吃。
