·您当前的位置:主页 > 技术教程 > Html5技术 >

[CSS3]CSS3自定义滚动条样式 -webkit-scrollbar

时间:2017-11-24 16:31酷播
[CSS3]CSS3自定义滚动条样式 -webkit-scrollbar

[CSS3]CSS3自定义滚动条样式 -webkit-scrollbar

  1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/   
  2. ::-webkit-scrollbar{   
  3.     width: 16px;   
  4.     height: 16px;   
  5.     background-color: #F5F5F5;   
  6. }   
  7.    
  8. /*定义滚动条轨道 内阴影+圆角*/   
  9. ::-webkit-scrollbar-track{   
  10.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);   
  11.     border-radius: 10px;   
  12.     background-color: #F5F5F5;   
  13. }   
  14.    
  15. /*定义滑块 内阴影+圆角*/   
  16. ::-webkit-scrollbar-thumb{   
  17.     border-radius: 10px;   
  18.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);   
  19.     background-color: #555;   
  20. }   
  1. ::-webkit-scrollbar              { /* 1 */ }   
  2.  
  3. ::-webkit-scrollbar-button       { /* 2 */ }   
  4.  
  5. ::-webkit-scrollbar-track        { /* 3 */ }   
  6.  
  7. ::-webkit-scrollbar-track-piece  { /* 4 */ }   
  8.  
  9. ::-webkit-scrollbar-thumb        { /* 5 */ }   
  10.  
  11. ::-webkit-scrollbar-corner       { /* 6 */ }   
  12.  
  13. ::-webkit-resizer                { /* 7 */ }   

  1. <style>   
  2. ::-webkit-scrollbar {   
  3.     width: 12px;   
  4. }   
  5. ::-webkit-scrollbar-track {   
  6.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    
  7.     -webkit-border-radius: 10px;   
  8.     border-radius: 10px;   
  9.     border:1px solid #666666   
  10. }   
  11. ::-webkit-scrollbar-thumb {   
  12.     -webkit-border-radius: 10px;   
  13.     border-radius: 10px;   
  14.     background: rgba(255,0,0,0.8);    
  15.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);    
  16. }   
  17. ::-webkit-scrollbar-thumb:window-inactive {   
  18.    
  19. background: rgba(255,0,0,0.4);    
  20.    
  21. }   
  22.    
  23. .test{   
  24. width:100px;   
  25. height:200px;   
  26. overflow:scroll;   
  27. border:1px solid #666666;   
  28. }   
  29. </style>   
  30. <div class="test">kfalsdfjlasjldf</div>   

来源:http://blog.csdn.net/china_skag/article/details/78219727

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器