本文我們主要和大家分享css3自訂捲軸樣式寫法,先簡單介紹一下各個屬性,文章會向大家展示四種效果。希望能協助到大家。
::-webkit-scrollbar :捲軸整體部分,其中的屬性有width,height,background,border等。
::-webkit-scrollbar-button :捲軸兩端的按鈕。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
::-webkit-scrollbar-track :外層軌道。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
::-webkit-scrollbar-track-piece :內層軌道,具體區別看下面gif圖,需要注意的就是它會覆蓋第三個屬性的樣式。
::-webkit-scrollbar-thumb :捲軸裡面可以拖動的那部分
::-webkit-scrollbar-corner :邊角,兩個捲軸交匯處
::-webkit-resizer :兩個捲軸交匯處用於拖動調整元素大小的小控制項(基本用不上)
下面看幾組比較
效果一
捲軸效果的css代碼如下,預設此部分為原始代碼,之後的修改都是在此基礎上修改
/*css主要部分的樣式*//*定義捲軸寬高及背景,寬高分別對應橫豎捲軸的尺寸*/ ::-webkit-scrollbar { width: 10px; /*對垂直流動條有效*/ height: 10px; /*對水平流動條有效*/ } /*定義捲軸的軌道顏色、內陰影及圓角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown; border-radius: 3px; } /*定義滑塊顏色、內陰影及圓角*/ ::-webkit-scrollbar-thumb{ border-radius: 7px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #E8E8E8; } /*定義兩端按鈕的樣式*/ ::-webkit-scrollbar-button { background-color:cyan; } /*定義右下角匯合處的樣式*/ ::-webkit-scrollbar-corner { background:khaki; }
效果二
在上面原始代碼上加如下代碼
::-webkit-scrollbar-track-piece { background-color: darkred; }
可看出覆蓋了之前::-webkit-scrollbar-track屬性的樣式
效果三
在上面原始代碼上加如下代碼
::-webkit-scrollbar-track-piece { background-color: darkred; background-image:url(https://www.baidu.com/img/baidu_jgylogo3.gif); }
現在是不是能理解上面說的內層軌道和外層軌道之分了
效果四
將原始代碼的::-webkit-scrollbar-track屬性改為
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-image:url(https://www.baidu.com/img/baidu_jgylogo3.gif); background-color: rosybrown; border-radius: 3px; }
大家仔細觀察上面的幾種情況,得出結論。