參考代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>個性化滾動條</title> 6 <style> 7 div{ 8 width:600px; 9 height:300px; 10 border:1px solid #000; 11 margin:60px 60px; 12 overflow: hidden; 13 overflow-y: scroll; 14 } 15 /*整個滾動條的樣式*/ 16 div::-webkit-scrollbar{ 17 width: 14px; 18 background-color: #f6f8fc; 19 } 20 /*滾動條軌道樣式*/ 21 div::-webkit-scrollbar-track{ 22 background-color: #F1F1F1; 23 border: 1px solid #f1f5fa; 24 } 25 /*滾動條滑塊樣式*/ 26 div::-webkit-scrollbar-thumb{ 27 background-color: #C0C0C0; 28 border-radius: 0px; 29 border-top: 1px solid #C0C0C0; 30 border-bottom: 1px solid #C0C0C0; 31 border-left: 1px solid #F1F1F1; 32 } 33 /*滾動條上的按鈕--垂直滾動條向上按鈕*/ 34 div::-webkit-scrollbar-button:decrement { 35 height: 10px; 36 background: url("./up.png") 0px 0px no-repeat; 37 border:1px solid #F1F1F1; 38 } 39 /*滾動條上的按鈕--垂直滾動條向下按鈕*/ 40 div::-webkit-scrollbar-button:increment { 41 height: 10px; 42 background: url("./down.png") 0px -2px no-repeat; 43 border:1px solid #F1F1F1; 44 } 45 </style> 46 </head> 47 <body> 48 <div> 49 <h1>CSS滾動條選擇器</h1> 50 <h3>可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式</h3> 51 <ul> 52 <li>::-webkit-scrollbar — 整個滾動條</li> 53 <li>::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)</li> 54 <li>::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊</li> 55 <li>::-webkit-scrollbar-track — 滾動條軌道</li> 56 <li>::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分</li> 57 <li>::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分</li> 58 <li>::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)</li> 59 </ul> 60 <hr> 61 <h1>語法</h1> 62 <p>::-webkit-scrollbar { styles here }</p> 63 <h1>注意</h1> 64 <p>該特性是非標准的，請盡量不要在生產環境中使用它！</p> 65 </div> 66 </body> 67 </html>
（up.png）
（down.png）
效果圖展示：
