纯CSS修改HTML滚动条颜色与宽度-html教程-PHP中文网

chrome/edge等webkit/blink内核浏览器支持::-webkit-scrollbar系列伪元素自定义滚动条样式，firefox仅支持scrollbar-width和scrollbar-color两个弱功能属性，ios safari有显示限制且无hover效果。

纯css修改html滚动条颜色与宽度

Chrome / Edge 里用 `::-webkit-scrollbar` 控制滚动条样式

只有基于 WebKit / Blink 内核的浏览器（Chrome、Edge、新版 Safari）支持自定义滚动条，核心是 ::-webkit-scrollbar 及其伪元素。Firefox 和旧版 Safari 完全不认这套，别白费劲。

它不是单个规则，而是一组可单独设置的伪元素：

::-webkit-scrollbar：整个滚动条容器（设宽度/高度）
::-webkit-scrollbar-track：轨道背景（可设圆角、背景色）
::-webkit-scrollbar-thumb：滑块本身（重点调颜色、圆角、hover 状态）
::-webkit-scrollbar-thumb:hover：悬停时的滑块样式（建议加过渡）

示例：让垂直滚动条变窄为 6px，滑块灰色带圆角，悬停变深灰

/* 必须先设容器尺寸，否则其他伪元素无效 */  
::-webkit-scrollbar {  
  width: 6px;  
}  
::-webkit-scrollbar-track {  
  background: #f5f5f5;  
  border-radius: 3px;  
}  
::-webkit-scrollbar-thumb {  
  background: #c1c1c1;  
  border-radius: 3px;  
}  
::-webkit-scrollbar-thumb:hover {  
  background: #a0a0a0;  
}

Firefox 滚动条无法用 CSS 自定义，只能靠系统级妥协

Firefox 从始至终没实现 ::-webkit-scrollbar，也不提供任何标准 CSS 接口。你查到的 scrollbar-width 和 scrollbar-color 是仅有的两个支持属性，但能力极弱：

scrollbar-width: thin | auto | none：只控制“粗细”，thin 是浏览器自己决定的窄值（通常约 8–10px），不能指定像素
scrollbar-color: <thumb><track></track></thumb>：只接受两个颜色值，不能设圆角、阴影、hover 效果

所以 Firefox 下要么接受默认滚动条，要么用 scrollbar-width: thin + scrollbar-color: #888 #eee 做最低限度适配。别试图写 ::-moz-scrollbar —— 它不存在。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

全局生效还是局部生效？选对作用域很关键

::-webkit-scrollbar 默认作用于整个页面，但你可以用更具体的选择器限制范围，比如只改某个 <div class="custom-scroll"> 里的滚动条：<pre class="brush:php;toolbar:false;">.custom-scroll::-webkit-scrollbar { width: 8px; } .custom-scroll::-webkit-scrollbar-thumb { background: #5b5b5b; }</pre> <p>注意两点：</p> <ul> <li>必须确保该元素有 <code>overflow: auto 或 scroll，且内容溢出才触发滚动条

如果父容器用了 transform、will-change 或 contain，可能意外创建新的层叠上下文，导致滚动条伪元素失效 —— 这时得把样式提到更高层级或换容器