自定義滾動條的樣式
阿新 • • 發佈:2022-05-16
自定義滾動條的樣式
P13G13overflow:scroll /* x y 方向都會*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll /*只是y方向*/
- 當我們在塊級元素上設定這些css屬性時,元素內容範圍超出塊級元素區域大小時,就根據設定的屬性在不同方向上出現滾動條,你可以滾動檢視內容,且不會超出塊級元素的範圍。
- 有時候我們需要自定義滾動條的樣式,比如一開始就它顯示,比如想改變滾動條的顏色,設定軌道的樣式等。
認識滾動條(每個部分對應的屬性)
::-webkit-scrollbar //滾動條整體部分
::-webkit-scrollbar-button //滾動條兩端的按鈕
::-webkit-scrollbar-track // 外層軌道
::-webkit-scrollbar-track-piece //內層軌道,滾動條中間部分(除去)
::-webkit-scrollbar-thumb //滾動條裡面可以拖動的那個
::-webkit-scrollbar-corner //邊角
::-webkit-resizer ///定義右下角拖動塊的樣式
簡單示例
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width:16px; height:16px; background-color:#F5F5F5; } /*定義滾動條軌道 內陰影+圓角*/ ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:10px; background-color:#F5F5F5; } /*定義滑塊 內陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#555; }
偽類的屬性
:horizontal//適用於任何水平方向上的滾動條
:vertical//適用於任何垂直方向的滾動條
:decrement//適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕
:increment//適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕
:start//適用於按鈕和軌道碎片。表示物件(按鈕軌道碎片)是否放在滑塊的前面
:end //適用於按鈕和軌道碎片。表示物件(按鈕軌道碎片)是否放在滑塊的後面
:double-button//適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。
:single-button//適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨著一個單獨的按鈕。
:no-button//表示軌道結束的位置沒有按鈕。
:corner-present//表示滾動條的角落是否存在。
:window-inactive//適用於所有滾動條,表示包含滾動條的區域,焦點不在該視窗的時候。
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
可以設定懸浮時滑鼠游標的樣式 cursor:pointer
}
釋出於 2021-02-28 11:53