CSS3自定义浏览器滚动条样式

一个完整滚动条右以下部分组成：

1. 
   ::-webkit-scrollbar 滚动条整体部分，常用属性：width,height,background,border；
   ::-webkit-scrollbar-button 滚动条两边的按钮，默认不设置时不显示，可设置高度、背景色、背景图片；
   ::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分；
   ::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分；
   ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分；
   ::-webkit-scrollbar-corner 边角；
   ::-webkit-resizer 定义右下角拖动块的样式

   2.借用一张网上挺不错的图片说明：

    

    

    

    

    

   

   
   
   <style> /* 设置整个滚动条的一些属性，宽度针对垂直滚动条，高度针对水平滚动条 */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* 整个滚动条去除button剩下的部分 */ ::-webkit-scrollbar-track { border-radius: 10px; background-color: #d8dce5 } /* 滚动条可拖拽的部分 */ ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #adadad; } ::-webkit-scrollbar-thumb:hover { background-color: #929292; } ::-webkit-scrollbar-thumb:active { background-color: #666363; } ::-webkit-scrollbar-corner { background-color: #535353 } ::-webkit-scrollbar-resizer { background-color: #ff6e00 } .sample { width: 600px; height: 400px; overflow: auto; } .sample-wrapper { width: 1200px; height: 1000px; background: -webkit-linear-gradient(red, blue); background: linear-gradient(red, blue); color: white; } </style> <div class="sample"> <div class="sample-wrapper"> <p>测试滚动示例1</p> <p>测试滚动示例2</p> <p>测试滚动示例3</p> <p>测试滚动示例4</p> <p>测试滚动示例5</p> <p>测试滚动示例6</p> <p>测试滚动示例7</p> <p>测试滚动示例8</p> </div> </div>