本文介紹了css3自定義滾動條樣式寫法，分享給大家，具體如下：
先簡單介紹一下各個屬性
::-webkit-scrollbar ：滾動條整體部分，其中的屬性有width,height,background,border等。
::-webkit-scrollbar-button ：滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track ：外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece ：內(nèi)層軌道，具體區(qū)別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。
::-webkit-scrollbar-thumb ：滾動條里面可以拖動的那部分
::-webkit-scrollbar-corner ：邊角，兩個滾動條交匯處
::-webkit-resizer ：兩個滾動條交匯處用于拖動調(diào)整元素大小的小控件（基本用不上）
下面看幾組比較
效果一
上圖滾動條效果的css代碼如下,默認此部分為原始代碼，之后的效果圖修改都是在此基礎上修改
| /*css主要部分的樣式*//*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 10px; /*對垂直流動條有效*/ height: 10px; /*對水平流動條有效*/ } /*定義滾動條的軌道顏色、內(nèi)陰影及圓角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown; border-radius: 3px; } /*定義滑塊顏色、內(nèi)陰影及圓角*/ ::-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); } |
