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

webkit内核滚动条样式详解

转载于 2014-01-07 23:20:00 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fanjf/p/3509873.html

本文详细介绍了webkit内核的滚动条样式设置，包括默认显示样式、鼠标点击滚动条时的显示样式以及滚动条的大小调整。通过具体代码示例，展示了如何自定义滚动条的外观。

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