雖然大多數(shù)人不會(huì)關(guān)注到滾動(dòng)條的樣式，但是有一些網(wǎng)站還是對(duì)滾動(dòng)條進(jìn)行了優(yōu)化，比如網(wǎng)易郵箱。我們可以用 CSS 來設(shè)置瀏覽器的滾動(dòng)條樣式，下面整理一下 CSS 滾動(dòng)條的幾個(gè)屬性及代表的意思。

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

主要有下面7個(gè)屬性：

::-webkit-scrollbar滾動(dòng)條整體，可以設(shè)置寬度等①::-webkit-scrollbar-button滾動(dòng)條兩端的按鈕②::-webkit-scrollbar-track外層軌道③::-webkit-scrollbar-track-piece內(nèi)層滾動(dòng)槽④::-webkit-scrollbar-thumb滾動(dòng)的滑塊⑤::-webkit-scrollbar-corner邊角⑥::-webkit-resizer下角拖動(dòng)塊的樣式⑦

如圖所示：

還有更詳盡的一些屬性：

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

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

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

:incrementdecrement 類似，用來指示按鈕或內(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)的偽類)

實(shí)例：

/* 設(shè)置滾動(dòng)條的樣式 */

::-webkit-scrollbar{width:12px;}/* 滾動(dòng)槽 */

::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:10px;}/* 滾動(dòng)條滑塊 */::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.1);

-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,0,0,0.4);}

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

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

.scrollbar{scrollbar-arrow-color:red;/*三角箭頭的顏色*/scrollbar-face-color:red;/*立體滾動(dòng)條的顏色（包括箭頭部分的背景色）*/scrollbar-3dlight-color:red;/*立體滾動(dòng)條亮邊的顏色*/scrollbar-highlight-color:red;/*滾動(dòng)條的高亮顏色（左陰影？）*/scrollbar-shadow-color:red;/*立體滾動(dòng)條陰影的顏色*/scrollbar-darkshadow-color:red;/*立體滾動(dòng)條外陰影的顏色*/scrollbar-track-color:red;/*立體滾動(dòng)條背景顏色*/scrollbar-base-color:red;/*滾動(dòng)條的基色*/}

三：取消/隱藏滾動(dòng)條

Firefox瀏覽器：

scrollbar-width:none;/* Firefox */

IE瀏覽器：

-ms-overflow-style:none;/* IE 10+ */

Chrome 和 Safari 瀏覽器：

::-webkit-scrollbar{display:none;}/* Chrome Safari */

注意：當(dāng)要隱藏滾動(dòng)條的時(shí)候，最好將 overflow 顯示設(shè)置為 auto 或者 scroll ，保證內(nèi)容是可滾動(dòng)的。

示例：

我們使用上面的CSS屬性以及溢出實(shí)現(xiàn)下面一個(gè)實(shí)例——隱藏水平滾動(dòng)條，同時(shí)允許垂直滾動(dòng)條：

.scrollbar::-webkit-scrollbar{

display:none;/* Chrome Safari */

}

.scrollbar{

scrollbar-width:none;/* firefox */

-ms-overflow-style:none;/* IE 10+ */

overflow-x:hidden;overflow-y:auto;

}

聲明：本文由w3h5原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處：《CSS設(shè)置瀏覽器滾動(dòng)條樣式及隱藏滾動(dòng)條》

地址：https://cloud.tencent.com/developer/article/1537366