CSS Scrollbar
2020-06-16 本文已影响0人
JunChow520
CSS中若在块级容器上设置了overflow:scroll/overflow-x:scroll/overflow-y:scroll属性，当块级内容区域超出块级元素范围时会以滚动条的形式展示，可以滚动里面的内容，里面的内容不会超出块级区域范围。
滚动条组合部分
滚动条
滚动条CSS伪元素
| 伪元素 | 描述 |
|---|---|
| ::-webkit-scrollbar | 滚动条整体部分 |
| ::-webkit-scrollbar-button | 滚动条两端按钮 |
| ::-webkit-scrollbar-track | 滚动条外层轨道 |
| ::-webkit-scrollbar-track-piece | 滚动条外层轨道，可见区域。 |
| ::-webkit-scrollbar-thumb | 滚动条内可拖动的滑块 |
| ::-webkit-scrollbar-cornor | 滚动条边角 |
| ::-webkit-resizer | 滚动条右下角拖动块 |
自定义滚动条的样式
::-webkit-scrollbar {
width: 2px;
height: 2px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #2d3748;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: #2b6cb0;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #1a202c;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
background: #666666;
}
::-webkit-scrollbar-track:active {
background: #333333;
}
::-webkit-scrollbar-corner {
background: transparent;
}
