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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-12

浏览次数：次

返回列表

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

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

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

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

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

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

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

示例代码：

<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>