Code:
/* 滚动轴样式 */
// 滚动轴整体,主要设置宽度
::-webkit-scrollbar {
width : 10px;
height: 10px;
}
// 滚动轴的背景区域
::-webkit-scrollbar-track {
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 0px;
background : rgba(0, 0, 0, 0.1);
}
// 滚动轴
::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.1);
background : rgba(0, 0, 0, 0.1);
}
// 滚动轴浮动样式
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.1);
background : rgba(189, 118, 118, 0.3);
}
Explanation
- If set individually for the style of a div of the roll axis, the div to set a class, then such set-top style below;
- Here are just a simple set up, to take effect in the chrome, not test other browsers
Suggest a roll axis styled article