滚动条样式

最新推荐文章于 2024-09-11 15:13:35 发布

原创最新推荐文章于 2024-09-11 15:13:35 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS3来定制网页滚动条的样式，包括滚动条的整体部分、滚动条按钮、轨道、滑块和边角等元素，并提供了具体的代码示例，展示了如何通过设置不同属性来改变滚动条的颜色、宽度和阴影效果，从而提升网页界面的美观度和用户体验。

滚动条属性：

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端按钮
::-webkit-scrollbar-track  滚动条外层轨道
::-webkit-scrollbar-track-piece  滚动条内层滚动槽
::-webkit-scrollbar-thumb 滚动条滑块
::-webkit-scrollbar-corner 滚动条边角
::-webkit-resizer 滚动条轨道右下角拖动块

自定义滚动条样式：

// 滚动条轨道
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0b0d12;
}
// 滚动条整体部分
::-webkit-scrollbar {
  width: 10px;
  background-color: #212328;
}
// 滚动条两端按钮
::-webkit-scrollbar-button {
  display: none;
}
// 滚动条方块
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #212328;
}
// 边角
::-webkit-scrollbar-corner {
  background-color: #0b0d12;
}