自定義滾動條樣式

2021-10-10 13:59:37 字數 664 閱讀 6805

乙個完整滾動條右以下部分組成:

::-webkit-scrollbar 滾動條整體部分,常用屬性:width,height,background,border;

::-webkit-scrollbar-button 滾動條兩邊的按鈕,預設不設定時不顯示,可設定高度、背景色、背景;

::-webkit-scrollbar-track 整個滾動條去除兩邊按鈕剩下的部分;

::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分;

::-webkit-scrollbar-thumb 滾動條裡面可以拖動的那部分;

::-webkit-scrollbar-corner 邊角;

::-webkit-resizer 定義右下角拖動塊的樣式

測試滾動示例2

測試滾動示例3

測試滾動示例4

測試滾動示例5

測試滾動示例6

測試滾動示例7

測試滾動示例8

自定義滾動條樣式

webkit scrollbar 滾動條整體部分 webkit scrollbar button 滾動條兩端的按鈕 webkit scrollbar track 外層軌道 webkit scrollbar track piece 內層軌道,滾動條中間部分 除去 webkit scrollbar th...

自定義滾動條的樣式

class class content lorem ipsum dolor sit amet,consectetur adipisicing elit.nulla vitae modi rerum natus numquam id ut harum aperiam.aliquid illo ad e...

CSS自定義滾動條樣式

ie是最早提供滾動條的樣式支援,好多年了,但是其它瀏覽器一直沒有支援,ie獨孤求敗了。這些樣式規則很簡單 scrollbar arrow color color 三角箭頭的顏色 scrollbar face color color 立體滾動條的顏色 包括箭頭部分的背景色 scrollbar 3dli...