轻松定制网页滚动条颜色

本文将指导您如何使用CSS代码快速修改网页滚动条颜色，例如将垂直滚动条设为红色，水平滚动条设为蓝色。

实现方法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

通过编写CSS样式代码来控制滚动条外观：

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

<code class="css">::-webkit-scrollbar { /* 滚动条整体样式 */
  width: 10px;       /* 滚动条宽度 */
  height: 10px;      /* 滚动条高度 */
  background-color: #f5f5f5; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb { /* 滚动条滑块样式 */
  background-color: #ff0000; /* 垂直滚动条颜色 (红色) */
  border-radius: 10px;       /* 滑块圆角 */
}

::-webkit-scrollbar-track { /* 滚动条轨道样式 */
  background-color: #0000ff; /* 水平滚动条颜色 (蓝色) */
}</code>

将以上CSS代码添加到您的网页样式表中即可生效。