CSS設(shè)置滾動(dòng)條樣式的方法是什么

CSS設(shè)置滾動(dòng)條樣式的方法是什么？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

IE下面就比較簡(jiǎn)單那了，自定義的項(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)條的基色*/

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS設(shè)置滾動(dòng)條樣式的方法是什么大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。