用CSS控制滾動條

2022-04-04 10:49:03 字數 736 閱讀 7938

用css控制滾動條樣式

1,overflow內容溢位時的設定

overflow 水平及垂直方向內容溢位時的設定

overflow-x 水平方向內容溢位時的設定

overflow-y 垂直方向內容溢位時的設定

以上三個屬性設定的值為visible、scroll、hidden、auto

visible 預設值。使用該值時,無論設定的"width"和"height"

的值是多少,其中的內容無論是否超出範圍都將被強制顯示。

hidden 效果與visible相反。任何超出"width"和"height"的內

容都會不可見。

scroll 無論內容是否超越範圍,都將顯示滾動條。

auto 當內容超出範圍時,顯示滾動條,否則不顯示。

應用:沒有水平滾動條:

test

沒有垂直滾動條

test

沒有滾動條

test

自動顯示滾動條

test

2,自己定義滾動條的顏色

我們一般預設的滾動條樣式如下左圖,右圖是放大了1600倍的樣

子,我們可以看到滾動條有幾種言責組合的,我給他們標了7個號,

分別注釋在下面的css**的後面了,注意css的注釋**是放在

兩個斜槓內的兩個星號之間,如:

/*這裡放注釋的**

*/body 以上2項適用與、、、

css控制滾動條

1 overflow內容溢位時的設定 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2 scrollbar 3d light color立體滾動條亮邊的顏色 scroll...

CSS控制 滾動條

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

css控制滾動條樣式

1 webkit scrollbar 滾動條整體部分,其中的屬性有width,height,background,border等。4 webkit scrollbar track piece 內層軌道,具體區別看下面gif圖,需要注意的就是它會覆蓋第三個屬性的樣式。5 webkit scrollba...