滚动条的默认样式可能不能让人满意,下面修改滚动默认样式:
效果图:
修改滚动条样式涉及三个伪类:
- ::-webkit-scrollbar(设置整个滚动条的大小)
- ::-webkit-scrollbar-thumb (设置滚动条滑块样式)
- ::-webkit-scrollbar-track(设置滚动轨道的样式)
示例:
::-webkit-scrollbar {
width: 5px;//这是竖向滚动条的宽度。如果是横向滚动条则设置height
}
::-webkit-scrollbar-thumb {
border-radius: 2.5px;
background: #434241;
}
::-webkit-scrollbar-track {
background: #0e0d0d;
border-radius: 2.5px;
}