注意:滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常用属性如下:
::-webkit-scrollbar |
滚动条整体样式 |
::-webkit-scrollbar-button |
一设置滚动条样式,滚动条两端的按钮图标就消失,但可以重新设置图片、新样式 |
::-webkit-scrollbar-track |
外层轨道 |
::-webkit-scrollbar-track-piece |
内层轨道,它会覆盖外层轨道 scrollbar-track 的样式 |
::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb:hover ::-webkit-scrollbar-thumb:vertical:hover ::-webkit-scrollbar-thumb:horizontal:hover |
滑块 滑块悬浮 纵向滑块悬浮 横向滑块悬浮 |
::-webkit-scrollbar-corner |
边角,两个滚动条交汇处 |
注意:滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值
/* 1,滚动条 */ ::-webkit-scrollbar { width: 20px; /* 纵向滚动条 宽度 */ height: 15px; /* 横向滚动条 高度 */ background: pink; /* 整体背景 */ border-radius: 10px; /* 整体 圆角 */ }
注意:滚动条两端的按钮也存在上述情况
/* 2,滚动条两端的按钮 */ ::-webkit-scrollbar-button{ width: 30px; /* 横向滚动条 宽度 */ height: 20px; /* 纵向滚动条 高度 */ background: black; border-radius: 10px; }