純CSS自定義瀏覽器滾動條
阿新 • • 發佈：2018-12-23
先看效果，大家按需求自行修改
具體程式碼：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>自定義瀏覽器滾動條</title> </head> <style> /*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 15px; /*對垂直流動條有效*/ height: 15px; /*對水平流動條有效*/ } /*定義滾動條的軌道顏色、內陰影及圓角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: chartreuse; border-radius: 3px; } /*定義滑塊顏色、內陰影及圓角*/ ::-webkit-scrollbar-thumb{ /*border-radius: 7px;*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: red; } /*定義兩端按鈕的樣式*/ ::-webkit-scrollbar-button { background-color:blue; } /*定義右下角匯合處的樣式*/ ::-webkit-scrollbar-corner { background:fuchsia; } </style> <body> <div class="mydiv" style="width: 2000px;height: 100px;border: 1px solid #BC8F8F;"> 該元素的寬為2000，高為200px </div> <img src="https://files.jb51.net/file_images/article/201708/2017082115263920.png"/> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> </body> </html>
OK