CSS怎樣設(shè)置滾動(dòng)條樣式

這篇文章主要介紹CSS怎樣設(shè)置滾動(dòng)條樣式，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　一、webkit下面的CSS設(shè)置滾動(dòng)條

　　上面是滾動(dòng)條的主要幾個(gè)設(shè)置屬性，還有更詳盡的CSS屬性

　　:horizontal：水平方向的滾動(dòng)條

　　:vertical：垂直方向的滾動(dòng)條

　　:decrement：應(yīng)用于按鈕和內(nèi)層軌道(trackpiece)。它用來指示按鈕或者內(nèi)層軌道是否會(huì)減小視窗的位置(比如，垂直滾動(dòng)條的上面，水平滾動(dòng)條的左邊。)

　　:increment：decrement類似，用來指示按鈕或內(nèi)層軌道是否會(huì)增大視窗的位置(比如，垂直滾動(dòng)條的下面和水平滾動(dòng)條的右邊。)

　　:start：偽類也應(yīng)用于按鈕和滑塊。它用來定義對(duì)象是否放到滑塊的前面。

　　:end：類似于start偽類，標(biāo)識(shí)對(duì)象是否放到滑塊的后面。

　　:double-button：該偽類以用于按鈕和內(nèi)層軌道。用于判斷一個(gè)按鈕是不是放在滾動(dòng)條同一端的一對(duì)按鈕中的一個(gè)。對(duì)于內(nèi)層軌道來說，它表示內(nèi)層軌道是否緊靠一對(duì)按鈕。

　　:single-button：類似于double-button偽類。對(duì)按鈕來說，它用于判斷一個(gè)按鈕是否自己獨(dú)立的在滾動(dòng)條的一段。對(duì)內(nèi)層軌道來說，它表示內(nèi)層軌道是否緊靠一個(gè)single-button。

　　:no-button：用于內(nèi)層軌道，表示內(nèi)層軌道是否要滾動(dòng)到滾動(dòng)條的終端，比如，滾動(dòng)條兩端沒有按鈕的時(shí)候。

　　:corner-present：用于所有滾動(dòng)條軌道，指示滾動(dòng)條圓角是否顯示。

　　:window-inactive：用于所有的滾動(dòng)條軌道，指示應(yīng)用滾動(dòng)條的某個(gè)頁面容器(元素)是否當(dāng)前被激活。(在webkit最近的版本中，該偽類也可以用于::selection偽元素。webkit團(tuán)隊(duì)有計(jì)劃擴(kuò)展它并推動(dòng)成為一個(gè)標(biāo)準(zhǔn)的偽類)

　　二、IE下面的CSS設(shè)置滾動(dòng)條

　　IE下面就比較簡單那了，自定義的項(xiàng)目比較少，全是顏色。

　　1、scrollbar-arrow-color:color;/*三角箭頭的顏色*/

　　2、scrollbar-face-color:color;/*立體滾動(dòng)條的顏色（包括箭頭部分的背景色）*/

　　3、scrollbar-3dlight-color:color;/*立體滾動(dòng)條亮邊的顏色*/

　　4、scrollbar-highlight-color:color;/*滾動(dòng)條的高亮顏色（左陰影？）*/

　　5、scrollbar-shadow-color:color;/*立體滾動(dòng)條陰影的顏色*/

　　6、scrollbar-darkshadow-color:color;/*立體滾動(dòng)條外陰影的顏色*/

　　7、scrollbar-track-color:color;/*立體滾動(dòng)條背景顏色*/

　　8、scrollbar-base-color:color;/*滾動(dòng)條的基色*/

以上是“CSS怎樣設(shè)置滾動(dòng)條樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！