CSS 自定義滾動條樣式。
給一個div內容快添加滾動條的自定義樣式。
(一)HTML結構(overflow-y:scroll)
<div id="sidebar" style="overflow-y:scroll;">
<ul class="sidebar-menu" id="nav-accordion">
${htmls }
</ul>
</div>
(二)CSS樣式
/*滾動條樣式*/
#sidebar::-webkit-scrollbar{
width: 9px;
height: 16px;
background-color: #f5f5f5;
}
/*定義滾動條的軌道,內陰影及圓角*/
#sidebar::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 20px;
background-color: #f1f2f7;
}
/*定義滑塊,內陰影及圓角*/
#sidebar::-webkit-scrollbar-thumb{
height: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #2a3542;
}
(三)效果如圖
(四)知識拓展
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條裏面的小方塊,能上下左右移動(取決於是垂直滾動條還是水平滾動條)
::-webkit-scrollbar-track 滾動條的軌道(裏面裝有thumb)
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕,允許通過點擊微調小方塊的位置
::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去)
::-webkit-scrollbar-corner 邊角,及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
可以根據第四部自定義出 符合自己項目 的滾條樣式。該案列只是作爲一個例子。