CSS滾動條樣式設定

2021-09-22 02:45:40 字數 810 閱讀 4247

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屬性

:horizontal 水平方向的滾動條

:vertical 垂直 方向的滾動條

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

:increment decrement類似,用來指示按鈕或內層軌道是否會增大視窗的位置(比如,垂直滾動條的下面和水平滾動條的右邊。)

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

:end 類似於start偽類,標識物件是否放到滑塊的後面。

:double-button 該偽類以用於按鈕和內層軌道。用於判斷乙個按鈕是不是放在滾動條同一端的一對按鈕中的乙個。對於內層軌道來說,它表示內層軌道是否緊靠一對按鈕。

:single-button 類似於

CSS 設定滾動條樣式

定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸 webkit scrollbar 定義滾動條軌道 內陰影 圓角 webkit scrollbar track 定義滑塊 內陰影 圓角 webkit scrollbar thumb 定義滾動條就是利用偽元素與偽類,那什麼是偽元素和偽類呢?偽類大家應該...

CSS 設定滾動條樣式

從dhtml出現以來,微軟對dhtml功能的加強就沒有停止過,在微軟最新的遊覽器internet explorer 5.5的的ie5.5增加了許多新的樣式表內容,對滾動條的樣式進行修改也是其中之一,下面我們簡單地介紹一下涉及瀏覽器滾動條的樣式表內容 1 overflow內容溢位時的設定 overfl...

設定滾動條樣式

html scrollbar 3d light color立體滾動條亮邊的顏色 scrollbar arrow color上下按鈕上三角箭頭的顏色 scrollbar base color滾動條的基本顏色 scrollbar dark shadow color立體滾動條強陰影的顏色 scrollba...