如何做 - 自定义滚动条
❮ 上一页 下一页 ❯
了解如何使用 CSS 创建自定义滚动条。
自定义滚动条
自己动手试一试 »
自己动手试一试 »
注意： Firefox 或 79 版本之前的 Edge 不支持自定义滚动条。
如何创建自定义滚动条
Chrome、Edge、Safari 和 Opera 支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改浏览器滚动条的外观。
以下示例创建了一个细的（10px 宽）滚动条，其轨道/条颜色为灰色，滑块颜色为深灰色（#888）
示例
/* 宽度 */::-webkit-scrollbar { width: 10px;}/* 轨道 */::-webkit-scrollbar-track { background: #f1f1f1;}/* 滑块 */::-webkit-scrollbar-thumb { background: #888;}
/* 悬停时的滑块 */::-webkit-scrollbar-thumb:hover { background: #555;}
自己动手试一试 »
此示例创建了一个带盒阴影的滚动条
示例
/* 宽度 */::-webkit-scrollbar { width: 20px;}/* 轨道 */::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px;}/* 滑块 */::-webkit-scrollbar-thumb { background: red; border-radius: 10px;}
自己动手试一试 »
滚动条选择器
对于 webkit 浏览器，您可以使用以下伪元素来自定义浏览器的滚动条
::-webkit-scrollbar — 滚动条本身。
::-webkit-scrollbar-button — 滚动条上的按钮（指向上和下的箭头）。
::-webkit-scrollbar-thumb — 可拖动的滚动滑块。
::-webkit-scrollbar-track — 滚动条的轨道（进度条）。
::-webkit-scrollbar-track-piece — 未被滑块覆盖的轨道（进度条）部分。
::-webkit-scrollbar-corner — 滚动条的底角，水平和垂直滚动条交汇处。
::-webkit-resizer — 出现在某些元素底角的可拖动调整大小的句柄。
❮ 上一页 下一页 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册