一、认识滚动条
::-webkit-scrollbar | 滚动条整体 |
::-webkit-scrollbar-thumb | 滚动条滑块 |
::-webkit-scrollbar-track | 滚动条轨道 |
::-webkit-scrollbar-button | 滚动条轨道两端按钮 |
::-webkit-scrollbar-track-piece | 滚动条内层轨道 |
::-webkit-scrollbar-corner | 滚动条交汇处 |
::-webkit-resizer | 滚动条的交汇处用于通过拖动调整元素大小的小控件 |
二、自定义滚动条(css)
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background-color: lightsteelblue;
}
::-webkit-scrollbar-track {
background-color: lightgreen;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: lightseagreen;
}
::-webkit-scrollbar-track:horizontal {
background-color: lightsalmon;
}
::-webkit-scrollbar-corner {
background-color: lightcoral;
}
效果图
三、滚动条可用伪类
:horizontal | 适用于水平方向上的滚动条 |
:vertical | 适用于垂直方向上的滚动条 |
:decrement | 适用于使区域向上或者向右移动的按钮 |
:increment | 适用于使区域向下或者向左移动的按钮 |
:start | 表示按钮或轨道碎片是否放在滑块的前面 |
:end | 表示按钮或轨道碎片是否放在滑块的后面 |
:double-button | 判断轨道结束的位置是否是一对按钮 |
:single-button | 判断轨道结束的位置是否是一个按钮 |
:no-button | 表示轨道结束的位置没有按钮。 |
:corner-present | 表示滚动条的角落是否存在 |
:window-inactive | 适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候 |
关键字:css、webkit、scroll、滚动条