全局的樣式代碼：

::-webkit-scrollbar {width: 10px;height: 10px;}/* 滾動條的滑塊 */::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}

　局部的樣式修改（可以是div）：

.div-class::-webkit-scrollbar {width: 10px;height: 10px;}/* 滾動條的滑塊 */.div-class ::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}

　　效果：

假如不想要滾動條，那么寬高設置為0就好了：?

::-webkit-scrollbar {width: 0px;height: 0px;}/* 滾動條的滑塊 */::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}

　　

擴展下其他的：

滾動條全局樣式： // 滾動條設置 ::-webkit-scrollbar {width: 10px;//y軸上的滾動條寬度height: 10px;//x軸上滾動條高度 } ::-webkit-scrollbar-track {border-radius: 3px; /*滾動條的背景區域的圓角*/background-color: #fdf8f5; /*滾動條的背景顏色*/ } ::-webkit-scrollbar-thumb {border-radius: 3px; /*滾動條的圓角*/background-color: #ccc; /*滾動條的背景顏色*/ }::-webkit-scrollbar-thumb:hover {background-color: rgb(46, 86, 159); }::-webkit-scrollbar-thumb:active {background-color: rgb(46, 86, 159);cursor: pointer; }

　　

轉載于:https://www.cnblogs.com/sweeeper/p/11277282.html

總結

以上是生活随笔為你收集整理的滚动条全局样式修改与局部修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。