先看效果圖
image
image.gif
?
附上效果圖代碼：
1.style部分
<style>
/*定義滾動條樣式（高寬及背景）*/
::-webkit-scrollbar {
width: 6px; /* 滾動條寬度督暂， width：對應(yīng)豎滾動條的寬度 height：對應(yīng)橫滾動條的高度*/
background: #007acc;
}
/*定義滾動條軌道（凹槽）樣式*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 較少使用 */
border-radius: 3px;
}
/*定義滑塊 樣式*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
height: 100px; /* 滾動條滑塊長度 */
background-color: #ccc;
}
</style>
2.body部分
<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
11111111
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111</p>
</div>
image.gif
最后术唬，總結(jié) 一個(gè)滾動條的組成部分(通常設(shè)置前三個(gè)即可)：
- ::-webkit-scrollbar 滾動條整體部分
- ::-webkit-scrollbar-thumb 滾動條里面的小方塊（即滾動條滑塊）薄疚，能向上向下移動（或橫向滾動條可往左往右移動）
- ::-webkit-scrollbar-track 滾動條的軌道（對應(yīng)上圖滾動條凹槽，里面裝有Thumb扼劈，即滾動條滑塊）
- ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置
- ::-webkit-scrollbar-corner 邊角，即兩個(gè)滾動條的交匯處
- ::-webkit-scrollbar-track-piece 內(nèi)層軌道且蓬，滾動條中間部分
- ::-webkit-resizer 兩個(gè)滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件
