如何自定義CSS滾動條的樣式？
歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~
本文由前端林子發表
本文會介紹CSS滾動條選擇器，並在demo中展示如何在Webkit核心瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。
0.需求
有的時候我們不想使用瀏覽器預設的滾動條樣式，因為不夠定製化和美觀。那麼如何自定義滾動條的樣式呢？下面一起來看看吧。
1 基礎知識
1.1 Webkit核心的css滾動條選擇器
::-webkit-scrollbar CSS偽類選擇器影響了一個元素的滾動條的樣式
屬性：
::-webkit-scrollbar — 整個滾動條
::-webkit-scrollbar-track — 滾動條軌道
::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊
::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)
::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分
::-webkit-scrollbar-corner — 邊角，即當同時有垂直滾動條和水平滾動條時交匯的部分
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)
注意：
(1)瀏覽器的支援情況：
::-webkit-scrollbar 僅僅在支援Webkit的瀏覽器 (Chrome, Safari)可以使用。
(2)可設定豎直/水平方向的滾動條
可以設定水平方向的滾動條(:horizontal)，不加預設是豎直方向(:vertical)。
(3)滾動條上的按鈕（:decrement、:increment）
可以設定圖片，這點會在下面demo中展示。
1.2 IE自定義滾動條樣式
可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定製性較低。這裡我只列舉了部分樣式，諸如scrollbar-3dlight-color、scrollbar-highlight-color等樣式試了下沒有效果，這裡不再列出：
scrollbar-arrow-color — 滾動條三角箭頭的顏色 scrollbar-face-color — 滾動條上滾動滑塊顏色
scrollbar-track-color— 滾動條軌道、按鈕背景的顏色 scrollbar-shadow-color— 滾動框上滑塊邊框的顏色
2.demo快速上手
2.1 Webkit核心的瀏覽器自定義滾動條樣式 (chrome, safari)
如果覺得上述說明有些抽象，可以直接在瀏覽器中開啟demo，結合demo中的註釋來理解各個屬性的意義。圖中我對其中的一些屬性做了標註，滾動條外層軌道屬性並未在圖中標註，可開啟chrome瀏覽器控制檯檢視屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar的demo--lynnshen</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scolltable {
width: 500px;
height: 300px;
border: 1px solid black;
/*實現水平垂直居中*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
overflow: scroll;
}
.content {
/*要設的比.scolltable更寬一些*/
width: 600px;
}
/*整個滾動條*/
::-webkit-scrollbar {
width: 24px;
background-color: transparent;
}
/*水平的整個滾動條*/
::-webkit-scrollbar:horizontal {
height: 24px;
background-color: transparent;
}
/*滾動條軌道*/
::-webkit-scrollbar-track {
background-color: #f6f8fc;
border-right: 1px solid #f1f5fa;
border: 1px solid #f1f5fa;
;
}
/*豎直的滑塊*/
::-webkit-scrollbar-thumb {
background-color: rgba(220, 228, 243, 1);
border-radius: 0px;
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
border-left: 1px solid #f1f5fa;
}
/*水平的滑塊*/
::-webkit-scrollbar-thumb:horizontal {
/* background-color: rgba(220, 228, 243, 1); */
border-radius: 0px;
border-top: 1px solid #edf2f9;
/* border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa; */
}
/*滾動條上的按鈕--豎直滾動條向上*/
::-webkit-scrollbar-button:decrement {
border-bottom: 1px solid #edf2f9;
height: 26px;
background: url("./images/scroll_up.png") 7px 9px no-repeat;
border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa;
}
/*滾動條上的按鈕--豎直滾動條向下*/
::-webkit-scrollbar-button:increment {
border-top: 1px solid #edf2f9;
height: 26px;
background: url("./images/scroll_down.png") 7px 10px no-repeat;
border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa;
border-bottom: 1px solid #f1f5fa;
}
/*滾動條上的按鈕--水平滾動條向左*/
::-webkit-scrollbar-button:horizontal:decrement {
border-top: 1px solid #edf2f9;
width: 26px;
background: url("./images/scroll_left.png") 9px 7px no-repeat;
border-top: 1px solid #f1f5fa;
border-bottom: 1px solid #f1f5fa;
border-right:1px solid #f1f5fa;
}
/*滾動條上的按鈕--水平滾動條向右*/
::-webkit-scrollbar-button:horizontal:increment {
border-top: 1px solid #edf2f9;
width: 25px;
background: url("./images/scroll_right.png") 10px 7px no-repeat;
border-left:1px solid #f1f5fa;
}
/*邊角*/
::-webkit-scrollbar-corner{
border:1px solid #dce4f3;
}
</style>
</head>
<body>
<div class="scolltable">
<div class="content">
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>
</div>
</body>
</html>實現效果：
WebKit核心的瀏覽器
說明：
(1)滾動條兩端的按鈕使用的圖片，四個角分別使用了四張圖片;
(2).scolltable實現了水平垂直居中的效果，具體方法是：使用絕對對位，將元素的定點定位到body的中心。然後使用負margin（即元素寬高的一半）將其拉回到body的中心。
2.2 IE自定義滾動條樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar for IE--lynnshen</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scolltable {
width: 500px;
height: 300px;
border: 1px solid black;
/*實現水平垂直居中*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
overflow: scroll;
scrollbar-face-color:greenyellow;
scrollbar-arrow-color:goldenrod;
scrollbar-shadow-color:red;
scrollbar-track-color:pink;
}
.content {
/*要設的比.scolltable更寬一些*/
width: 600px;
}
</style>
</head>
<body>
<div class="scolltable">
<div class="content">
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>
</div>
</body>
</html>實現效果：
IE
3.小結
本文主要是想記錄下在Webkit核心的瀏覽器和IE中，如何自定義滾動條的樣式，並分別提供了兩個demo。如有問題，歡迎指正。
此文已由作者授權騰訊雲+社群釋出，更多原文請點選
搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！