詳解css3自定義滾動條樣式寫法
我要評論本文介紹了css3自定義滾動條樣式寫法，分享給大家，具體如下：
先簡單介紹一下各個屬性
::-webkit-scrollbar ：滾動條整體部分，其中的屬性有width,height,background,border等。
::-webkit-scrollbar-button ：滾動條兩端的按鈕?？梢杂胐isplay: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代碼如下,默認此部分為原始代碼，之后的效果圖修改都是在此基礎(chǔ)上修改
/*css主要部分的樣式*/
/*定義滾動條寬高及背景，寬高分別對應(yīng)橫豎滾動條的尺寸*/
::-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);
}
現(xiàn)在是不是能理解上面說的內(nèi)層軌道和外層軌道之分了
效果四
將原始代碼的::-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;
}
大家仔細觀察上面的幾種情況，得出結(jié)論。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 瀏覽器滾動條太寬，太丑，影響日常開發(fā)怎么辦，本文介紹了如何使用CSS3改變?yōu)g覽器滾動條樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2019-01-04
本篇文章主要介紹了CSS3自定義滾動條樣式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-21CSS3自定義滾動條樣式 ::webkit-scrollbar的示例代碼詳解
這篇文章主要介紹了CSS3自定義滾動條樣式 ::webkit-scrollbar的示例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可2020-06-01
