overflow滚动条样式设置，ie和webkit内核
Posted 奔跑的铃铛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了overflow滚动条样式设置，ie和webkit内核相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 body{ 9 /*ie下修改滚动条样式，在webkit内核浏览器无效*/ 10 /*scrollbar-arrow-color: #f4ae21;三角箭头的颜色 11 scrollbar-face-color: #333; *立体滚动条的颜色 12 scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色 13 scrollbar-highlight-color: #666; 滚动条空白部分的颜色 14 scrollbar-shadow-color: #999; 立体滚动条阴影的颜色 15 scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色 16 scrollbar-track-color: #666; 立体滚动条背景颜色 17 scrollbar-base-color:#f8f8f8; 滚动条的基本颜色 18 Cursor:url(mouse.cur);自定义个性鼠标*/ 19 } 20 div{ 21 height:100px; 22 width:200px; 23 overflow:auto; 24 } 25 td{ 26 display:inline-block; 27 margin:10px 20px; 28 } 29 /*webkit内核浏览器修改滚动条样式*/ 30 ::-webkit-scrollbar { 31 width: 8px; 32 } 33 ::-webkit-scrollbar-thumb { 34 border-radius: 10px; 35 background: rgba(0,0,0,0.2); 36 } 37 ::-moz-scrollbar { 38 width: 8px; 39 } 40 ::-moz-scrollbar-thumb { 41 border-radius: 10px; 42 background: rgba(0,0,0,0.2); 43 } 44 /*当前窗口未激活的情况下*/ 45 ::-webkit-scrollbar-thumb:window-inactive { 46 background: rgba(0,0,0,0.1); 47 } 48 /*hover到滚动条上*/ 49 ::-webkit-scrollbar-thumb:vertical:hover{ 50 background-color: rgba(0,0,0,0.3); 51 } 52 /*滚动条按下*/ 53 ::-webkit-scrollbar-thumb:vertical:active{ 54 background-color: rgba(0,0,0,0.7); 55 } 56 </style> 57 </head> 58 <body> 59 <div> 60 <table> 61 <tr> 62 <td>12345</td> 63 <td>12345</td> 64 </tr> 65 <tr> 66 <td>12345</td> 67 <td>12345</td> 68 </tr> 69 <tr> 70 <td>12345</td> 71 <td>12345</td> 72 </tr> 73 <tr> 74 <td>12345</td> 75 <td>12345</td> 76 </tr> 77 </table> 78 </div> 79 </body> 80 </html>
如有错误，请您指正！
以上是关于overflow滚动条样式设置，ie和webkit内核的主要内容，如果未能解决你的问题，请参考以下文章