轉自:https://segmentfault.com/a/1190000012800450
PS:非商業用途,如有侵權,請聯系删除。
一 前言
在CSS 中,如果我們在塊級容器上設定了屬性:
overflow:scroll /* x y 方向都會*/
或者
overflow-x:scroll /*隻是x方向*/
或者
overflow-y:scroll /*隻是y方向*/
當塊級内容區域超出塊級元素範圍的時候,就會以滾動條的形式展示,你可以滾動裡面的内容,裡面的内容不會超出塊級區域範圍。
有時候我們需要自定義滾動條的樣式,比如一開始就它顯示,比如想改變滾動條的顔色,設定軌道的樣式等,那麼這篇文章就是為你準備的。
二 正文
1.認識滾動條
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBHL0FWby9mZvwVZnFWbp1zczV2YvJHctM3cv1Ce-k1MVNlRqZVa5knW0xmMMRXOykVdRhkYxYUbaBTNXpFdkdlW6lTeMZTTINGMShUYvwlbj5yZtlmbkN3YuQnclZnbvN2Ztl2Lc9CX6MHc0RHaiojIsJye.jpg)
設定scrollbar的為CSS僞元素,對應上圖的數字:
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
屬性介紹:
::-webkit-scrollbar //滾動條整體部分
::-webkit-scrollbar-button //滾動條兩端的按鈕
::-webkit-scrollbar-track // 外層軌道
::-webkit-scrollbar-track-piece //内層軌道,滾動條中間部分(除去)
::-webkit-scrollbar-thumb //滾動條裡面可以拖動的那個
::-webkit-scrollbar-corner //邊角
::-webkit-resizer ///定義右下角拖動塊的樣式
2.設定樣式
demo
進入頁面,打開控制台工具,選中其中一個樣式,就能看到該樣式的CSS源碼。
/*定義滾動條高寬及背景
高寬分别對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width:16px;
height:16px;
background-color:#F5F5F5;
}
/*定義滾動條軌道
内陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
border-radius:10px;
background-color:#F5F5F5;
}
/*定義滑塊
内陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background-color:#555;
}
任何對象都可以設定:邊框、陰影、背景圖檔等等,建立的滾動條任然會按照作業系統本身的設定來完成其互動的行為。下面的僞類可以應用到上面的僞元素中。
:horizontal//适用于任何水準方向上的滾動條
:vertical//适用于任何垂直方向的滾動條
:decrement//适用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕
:increment//适用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕
:start//适用于按鈕和軌道碎片。表示對象(按鈕軌道碎片)是否放在滑塊的前面
:end //适用于按鈕和軌道碎片。表示對象(按鈕軌道碎片)是否放在滑塊的後面
:double-button//适用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨着一對在一起的按鈕。
:single-button//适用于按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。
:no-button//表示軌道結束的位置沒有按鈕。
:corner-present//表示滾動條的角落是否存在。
:window-inactive//适用于所有滾動條,表示包含滾動條的區域,焦點不在該視窗的時候。
用法舉例:
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}
3.IE浏覽器
相容IE的參考連結:https://www.cnblogs.com/koley...
三 後記
Chrome能很好的支援自定義滾動條,其它的浏覽器在不同程度上支援自定義滾動條樣式。
參
四 demo
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title></title>
<style>
.div-ul{
background: #bbb;
width: 300px;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
}
/* 滾動條整體部分 */
.div-ul::-webkit-scrollbar{
width: 12px; /* 縱向滾動條寬度 */
height: 12px;/* 橫向滾動條高度 */
background-color: #F5F5F5; /* 滾動條整體背景,一般被覆寫着 */
}
/* 滾動條裡面的滑塊 */
.div-ul::-webkit-scrollbar-thumb{
border-radius: 10px; /* 滾動條滑塊圓角 */
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 滾動條滑塊陰影 */
background-color: #eceff0; /* 滾動條滑塊顔色 */
}
/* 滾動條的軌道(裡面裝有Thumb) */
.div-ul::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滾動條軌道陰影 */
border-radius: 10px; /* 滾動條軌道圓角 */
background-color: #F5F5F5; /* 滾動條軌道背景 */
}
</style>
</head>
<body>
<div>
<ul class="div-ul">
<li>123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123</li>
<li>234</li>
<li>345</li>
<li>456</li>
<li>567</li>
<li>678</li>
<li>234</li>
<li>345</li>
<li>456</li>
<li>567</li>
<li>678</li>
<li>234</li>
<li>345</li>
<li>456</li>
<li>567</li>
<li>678</li>
</ul>
</div>
</body>
</html>