滚动条样式修改

最新推荐文章于 2023-05-11 14:05:36 发布

scener```y

最新推荐文章于 2023-05-11 14:05:36 发布

阅读量644

点赞数

文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_47763287/article/details/123659034

版权

本文介绍了如何使用::-webkit-scrollbar伪类选择器来修改滚动条的样式，详细讲解了滚动条的各个组成部分，并提供了设置示例，包括滚动条的宽度、高度、轨道、滑块、按钮等的详细定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

::-webkit-scrollbar伪类选择器可以修改滚动条的样式，仅支持webkit内核的浏览器使用。

一、滚动条的组成

1）::-webkit-scrollbar 定义整个滚动条（常设宽高）颜色外观属性
2）::-webkit-scrollbar-button 定义滚动条上按钮 (上下箭头)属性
3）::-webkit-scrollbar-thumb 定义滚动条滚动滑块属性
4）::-webkit-scrollbar-track 定义滚动条滚动条轨道属性
5）::-webkit-scrollbar-track-piece 定义滚动条没有滑块的轨道部分显示属性
6）::-webkit-scrollbar-corner 定义两个滚动条的交汇处属性
7）::-webkit-resizer 定义两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。

二、详细设置

1）:horizontal    用于任何水平方向上的滚动条
2）:vertical    用于任何垂直方向上的滚动条
3）:decrement    用于按钮和轨道碎片，表示可以使区域向上或者向右移动的区域和按钮
4）:increment 用于按钮和轨道碎片，表示可以使区域向下或者向左移动的区域和按钮
5）:start 用于按钮和轨道碎片，表示对象（按钮轨道碎片）是否放在滑块的前面
6）:end 用于按钮和轨道碎片，表示对象（按钮轨道碎片）是否放在滑块的后面

三、例子

1. 定义滚动条高宽及背景（高宽分别对应横竖滚动条的尺寸）

.box::-webkit-scrollbar {  
    width: 15px;  
    height: 15px;  
    background: #F1F1F1;  
}

2. 定义滚动条轨道

.box::-webkit-scrollbar-track  {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  // 内阴影 
    border-radius: 10px;  // 圆角
    background: #F1F1F1;  
}

3. 定义滑块

.box::-webkit-scrollbar-thumb {  
    border-radius: 10px;  // 圆角
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  // 内阴影
    background-color: #555;  
}

4. 定义按钮

.box::-webkit-scrollbar-button {
  height: 10px;
  width: 10px;
  background: #f1f1f1;
} 
.box::-webkit-scrollbar-button:horizontal:decrement {
  border-top: 5px solid transparent;
  border-right: 10px solid #cccccc;
  border-bottom: 5px solid transparent;
}
.box::-webkit-scrollbar-button:horizontal:increment {
  border-top: 5px solid transparent;
  border-left: 10px solid #cccccc;
  border-bottom: 5px solid transparent;
}
.box::-webkit-scrollbar-button:vertical:decrement {
  border-top: 10px solid #cccccc;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.box::-webkit-scrollbar-button:vertical:increment {
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 10px solid #cccccc;
}

5）滚动条上半边或左半边

.box::-webkit-scrollbar-track-piece:start {

}

6）当焦点不在当前区域滑块的状态

.box::-webkit-scrollbar-thumb:window-inactive {  

}

7）当鼠标经过水平滚动条右面的按钮上的状态

.box::-webkit-scrollbar-button:horizontal:decrement:hover {  

}