滚动条样式

qq_41985405

已于 2024-05-21 10:04:02 修改

阅读量139

点赞数

文章标签： css css3 html

于 2022-11-30 14:59:13 首次发布

本文链接：https://blog.csdn.net/qq_41985405/article/details/128115366

版权

这篇博客详细介绍了如何使用WebKit浏览器引擎的特定CSS伪元素来定制网页滚动条的外观，包括滚动条整体、滚动滑块、轨道等部分的样式设置，提供了一套完整的示例代码，展示了滚动条在鼠标悬停和激活状态下的不同颜色和效果。

摘要由CSDN通过智能技术生成

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

// 整个滚动条
::-webkit-scrollbar {
  background: #f5f7fa;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

// 滚动条上的滚动滑块
::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 10px;

  &:hover {
    background: gray;
    cursor: pointer;
  }

  &:active {
    background: #4d4d4d;
  }
}