开发指南107-谷歌内核浏览器滚动条设置
开发指南107-谷歌内核浏览器滚动条设置
平台上统一制定了滚动条样式(仅限于webkit内核)：
/* ------美化谷歌浏览器滚动条 开始-----------*/::-webkit-scrollbar{width:12px;height:12px;background-color: #E1E1E1;}
::-webkit-scrollbar-button:single-button {
background-color:#E1E1E1;
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 12px;
width: 12px;
background-position: center 4px;
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 12px;
width: 12px;
background-position: center 2px;
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url(“data:image/svg+xml;utf8,”);
}
::-webkit-scrollbar-track{
background-color: #E1E1E1;
}
::-webkit-scrollbar-track-piece{background-color:#E1E1E1;}
::-webkit-scrollbar-thumb{background-color:#B4B4B4;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background-color:#858585;}
::-webkit-scrollbar-corner{background-color:#E1E1E1}
/———- 美化谷歌浏览器滚动条 结束———–/
其中最复杂的部分是定义滚动条两端的箭头