webkit内核的滚动条样式(chrome,sarfrai)

webkit内核的滚动条样式(chrome,sarfrai)

/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb { background-color: #018EE8; height: 50px; outline-offset: -2px; outline: 2px solid #fff; -webkit-border-radius: 4px; border: 2px solid #fff; }

/*---鼠标点击滚动条显示样式--*/
 ::-webkit-scrollbar-thumb:hover { background-color: #FB4446; height: 50px; -webkit-border-radius: 4px; }

/*---滚动条大小--*/
::-webkit-scrollbar { width: 8px; height: 8px; }

/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0; }
::-webkit-scrollbar-thumb:active { height: 50px; background-color: #000; -webkit-border-radius: 4px; }

 

效果如下：