【css】滚动条webkit-scrollbar样式重置

作者：System 时间：2024年08月19日分类：所有,css3 字数：578

这篇文章距离上次修改已过235天，其中的内容可能已经有所变动。

在CSS中，可以使用::-webkit-scrollbar伪元素及其关联的伪元素来自定义滚动条的样式。以下是一个基本的例子，展示了如何为所有滚动条设置统一的样式：

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
  height: 12px; /* 设置滚动条的高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置轨道的背景颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 设置滑块的背景颜色 */
}

/* 当鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}

这段代码将为所有使用WebKit引擎的浏览器（如Chrome、Safari）上的滚动条设置一个自定义样式。你可以根据需要调整width、height、background等属性来自定义滚动条的外观。

【css】滚动条webkit-scrollbar样式重置

评论已关闭

推荐阅读