滾動條組成
- -webkit-scrollbar 滾動條整體部分
- -webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
- -webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
- -webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
- -webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
- -webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
- -webkit-resizer 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件
demo寫法
例如要給<div class="box">我是一段很長的文字...</div>加上滾動條 并且設置滾動條的樣式
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
box::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
box::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滑塊 內陰影+圓角*/
box::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*通用樣式*/
::-webkit-scrollbar {
width: 0.07rem;
height: 0.07rem;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 0.05rem;
background-color: rgba(144, 146, 152, 0.3);
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
結果示例如下（可以隨意改成自己喜歡的樣子哦）：
滾動條示例
喜歡的話給我點個贊吧！
居老師
