开发指南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,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:increment {

    height: 12px;

    width: 12px;

    background-position: center 2px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:increment:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement {

    height: 12px;

    width: 12px;

    background-position: 3px 3px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:increment {

    height: 12px;

    width: 12px;

    background-position: 3px 3px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");

}

::-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}

/*---------- 美化谷歌浏览器滚动条  结束-----------*/

其中最复杂的部分是定义滚动条两端的箭头