滚动条轨道背景色怎么改_html滚动条轨道背景颜色设置教程-html教程-PHP中文网

滚动条轨道背景色怎么改_html滚动条轨道背景颜色设置教程

星夢妙者

发布： 2025-11-12 18:55:02

原创

836人浏览过

答案：通过CSS的::-webkit-scrollbar-track伪元素可设置滚动条轨道背景色，适用于Webkit内核浏览器。示例中定义了滚动条宽度、轨道背景色及滑块样式，并支持悬停效果；该方法在Chrome、Edge、Safari中有效，Firefox需借助JavaScript库实现兼容。

滚动条轨道背景色怎么改_html滚动条轨道背景颜色设置教程

修改HTML滚动条轨道背景色主要通过CSS的伪元素来实现，尤其在Webkit内核浏览器（如Chrome、Edge、Safari）中支持较好。下面教你如何设置滚动条轨道的背景颜色。

使用Webkit伪元素自定义滚动条

Webkit浏览器提供了几个特殊的伪元素，可以用来样式化滚动条的各个部分：

::-webkit-scrollbar：整个滚动条的宽度
::-webkit-scrollbar-track：滚动条轨道（背景部分）
::-webkit-scrollbar-thumb：滑块（可拖动部分）

要修改轨道背景色，重点使用 ::-webkit-scrollbar-track。

示例代码：

立即学习“前端免费学习笔记（深入）”；

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

<style>
  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 12px; /* 滚动条宽度 */
  }
<p>/<em> 轨道样式 </em>/
::-webkit-scrollbar-track {
background-color: #f0f0f0; /<em> 轨道背景色 </em>/
border-radius: 6px;
}</p><p>/<em> 滑块样式 </em>/
::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 6px;
}</p><p>/<em> 滑块悬停状态 </em>/
::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8;
}</p></style>

登录后复制