CSS网页滚动条样式定制指南

本文将指导您如何使用CSS轻松定制网页横向和纵向滚动条的样式。

修改滚动条颜色

CSS 提供了简单的方法来更改滚动条的颜色。

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

横向滚动条:

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

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

下载

以下代码片段将横向滚动条的颜色设置为蓝色：

<code class="css">::-webkit-scrollbar-thumb {
  background-color: blue;
}</code>

纵向滚动条:

类似地，您可以使用以下代码将纵向滚动条的颜色设置为红色：

<code class="css">::-webkit-scrollbar-track {
  background-color: red;
}</code>

完整示例：同时修改横向和纵向滚动条颜色

将以上两个代码片段结合起来，即可同时修改横向和纵向滚动条的颜色：

<code class="css">::-webkit-scrollbar-track {
  background-color: red;
}

::-webkit-scrollbar-thumb {
  background-color: blue;
}</code>

此示例将纵向滚动条设置为红色，横向滚动条设置为蓝色。 您可以根据需要更改颜色值。