蒐集資料總結如下：
當內容超出容器時，容器會出現滾動條，其自帶的滾動條有時無法滿足我們審美要求，那麼我們可以通過css偽類來實現對滾動條的自定義。
首先我們要了解滾動條。滾動條從外觀來看是由兩部分組成：1，可以滑動的部分，我們叫它滑塊2，滾動條的軌道，即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。
滾動條的css樣式主要有三部分組成：
1、::-webkit-scrollbar 定義了滾動條整體的樣式；
2、::-webkit-scrollbar-thumb 滑塊部分；下面以overflow-y:auto;為例（overflow-x:auto同）
html**：
.test
.scrollbar
.test-1::-webkit-scrollbar
.test-1::-webkit-scrollbar-thumb
.test-1::-webkit-scrollbar-track
如果要改變滾動條的寬度：在::-webkit-scrollbar中改變即可；如果要改變滾動條滑塊的圓角，在::-webkit-scrollbar-thumb 中改變；如果要改軌道的圓角在::-webkit-scrollbar-track中改變；
css**：
.test-5::-webkit-scrollbar
.test-5::-webkit-scrollbar-thumb
.test-5::-webkit-scrollbar-track
火狐修改滾動條
scrollbar-color: #202e4393 #202e4393;
scrollbar-track-color: #202e4393;
-ms-scrollbar-track-color: #202e4393;
scrollbar-width: none;
-ms-overflow-style: none; //相容ie10+
CSS3自定義滾動條樣式
主要部分 自定義樣式 滾動條整體樣式 transcrided text webkit scrollbar 滾動條滑塊 transcrided text webkit scrollbar thumb 滾動條軌道 transcrided text webkit scrollbar track chrom...
CSS3自定義滾動條樣式
寫在前面 滾動條是個很常見的東東，不過某些瀏覽器自帶的滾動條確實不太好看啊，下面可以作為學習，下自定義滾動條的實現，這樣你的滾動條就可以美美的啦。但是，也只能玩玩，因為只針對webkit核心的瀏覽器啊啊啊啊啊！overflow介紹 定義 overflow 屬性指定當它溢位其塊級容器時,是否剪輯內容，...
css3自定義滾動條
瀏覽器預設的滾動條樣式不是很美觀，在有些需求中，我們需要更改預設滾動條樣式。目前還無法做到相容所有瀏覽器的範圍內修改預設滾動條樣式，google ie可更改預設滾動條樣式，火狐暫不支援更改預設滾動條樣式。滾動條可修改以下樣式 修改部分 google對應偽類 滾動條寬高及背景 webkit scrol...