::-webkit-scrollbar{/* 1 */} /*滚动条垂直方向的宽度与水平方向的高度*/
::-webkit-scrollbar-button{/* 2 */} /*滚动条按钮*/
::-webkit-scrollbar-track{/* 3 */} /*滚动条轨道*/
::-webkit-scrollbar-track-piece{/* 4 */} /*滚动条垂直方向轨道件*/
::-webkit-scrollbar-thumb{/* 5 */} /*滚动条轨道上的按钮*/
::-webkit-scrollbar-corner{/* 6 */} /*滚动条轨道上的滚动角*/
::-webkit-resizer{/* 7 */}/**/
:horizontal//横向滚动条
:vertical//垂直滚动条
:window-inactive //窗口未激活状态
...其它
举例:
::-webkit-scrollbar {
width: 0.2em;
}
::-webkit-scrollbar:horizontal //横向滚动条样式
{
height: 0.2em;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(169,169,169,0.4);
}
最终效果
最新评论: