首頁

web前端

css教學

css改變捲軸樣式

藏色散人

Apr 08, 2021 am 09:43 AM

css

css改變捲軸樣式的方法：1、透過「-webkit-scrollbar」屬性設定捲軸整體部分；2、透過「-webkit-scrollbar-button」屬性設定捲軸兩端的按鈕等等。

css改變捲軸樣式

#本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

因為在現在的大部分項目中很多都用到了滾動條，有時候用到模擬的滾動條，現在說下滾動條的CSS也能解決。

例如網易信箱的捲軸樣子很好看，就是利用的CSS來設定的，而且是webkit瀏覽器的。如圖：
css改變捲軸樣式
下面就來講解這幾個屬性怎麼使用，代表什麼意思。

一：webkit下面的CSS設定捲軸

主要有下面7個屬性

::-webkit-scrollbar 捲軸整體部分，可以設定寬度啥的
::-webkit-scrollbar-button 捲軸兩端的按鈕
::-webkit-scrollbar-track 外層軌道
::-webkit-scrollbar -track-piece 內層滾動槽
::-webkit-scrollbar-thumb 滾動的滑桿
::-webkit-scrollbar-corner 邊角
#:: -webkit-resizer 定義右下角拖曳區塊的樣式

如圖所示：
css改變捲軸樣式
上面是捲軸的主要幾個設定屬性，還有更詳盡的CSS屬性

:horizontal 水平方向的捲軸

:vertical 垂直方向的捲軸

:decrement 應用於按鈕和內層軌道(track piece)。它用來指示按鈕或內層軌道是否會減少視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)

:increment decrement類似，用來指示按鈕或內層軌道是否會增加視窗的位置(例如，垂直捲軸的下面和水平捲軸的右邊。)

#:start 偽類別也應用於按鈕和滑桿。它用來定義物件是否放到滑桿的前面。

:end 類似start偽類，標識物件是否放到滑桿的後面。

:double-button 此偽類以用於按鈕和內層軌道。用來判斷一個按鈕是不是放在捲軸同一端的一對按鈕中的一個。對於內層軌道來說，它表示內層軌道是否緊靠一對按鈕。

:single-button 類似double-button偽類。對按鈕來說，它用來判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。

:no-button 用於內層軌道，表示內層軌道是否要捲動到捲軸的終端，例如，捲軸兩端沒有按鈕的時候。

:corner-present 用於所有捲軸軌道，指示滾動條圓角是否顯示。

:window-inactive 用於所有的捲軸軌道，指示應用捲軸的某個頁面容器(元素)是否目前被啟動。 (在webkit最近的版本中，該偽類也可以用於::selection偽元素。webkit團隊有計劃擴展它並推動成為一個標準的偽類)

CSS也很簡單，例：

/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-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);
}

【推薦學習：css影片教學】