关于滚动条的设计，需要用到css3的微元素，都列在下边吧（以Chrome内核webkit为例）。
-webkit-scrollbar 滚动条的整体轮廓，width表示纵向滚动条的宽度，height表示横向滚动条的高度。
-webkit-scrollbar-track 滚动轨迹
-webkit-scrollbar-thumb 滚动滑块
-webkit-scrollbar-corner 滚动条右下角的小正方形
做个例子参考一下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box{ 9 width: 800px; 10 height: 500px; 11 overflow: auto; 12 margin: 20px auto; 13 background-color: #ccc; 14 border: 1px solid #ccc; 15 border-radius: 10px; 16 padding: 5px; 17 } 18 .box::-webkit-scrollbar{ 19 width: 6px; 20 height: 6px; 21 } 22 .box::-webkit-scrollbar-track, .box::-webkit-scrollbar-thumb{ 23 border-radius: 999px; 24 } 25 .box::-webkit-scrollbar-track{ 26 background-color: rgba(0, 0, 0, 0.2); 27 } 28 .box::-webkit-scrollbar-thumb{ 29 background-color: rgba(90, 18, 18, 0.5); 30 } 31 .box::-webkit-scrollbar-corner{ 32 background: transparent; 33 } 34 p{ 35 color: #6e3737; 36 text-align: center; 37 line-height: 30px; 38 white-space: nowrap; 39 } 40 </style> 41 </head> 42 <body> 43 <div class=\'box\'> 44 <p>css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化</p> 45 <p>1</p> 46 <p>2</p> 47 <p>3</p> 48 <p>4</p> 49 <p>6</p> 50 <p>7</p> 51 <p>8</p> 52 <p>9</p> 53 <p>9</p> 54 <p>9</p> 55 <p>9</p> 56 </div> 57 </body> 58 </html>