CSS自定義滾動條樣式

2021-09-07 06:58:38 字數 1094 閱讀 2808

ie是最早提供滾動條的樣式支援,好多年了,但是其它瀏覽器一直沒有支援,ie獨孤求敗了。

這些樣式規則很簡單:

•scrollbar-arrow-color: color; /*三角箭頭的顏色*/

•scrollbar-face-color: color; /*立體滾動條的顏色(包括箭頭部分的背景色)*/

•scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/

•scrollbar-highlight-color: color; /*滾動條的高亮顏色(左陰影?)*/

•scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/

•scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/

•scrollbar-track-color: color; /*立體滾動條背景顏色*/

•scrollbar-base-color:color; /*滾動條的基色*/

大概就這些,你也可以定義cursor來定義滾動條的滑鼠手勢。

一下是幾種滾動條的特效: 

1、 控制橫向和縱向滾動條的顯隱

去掉滾動條 x 軸

去掉滾動條 y 軸

滾動條 x/y 軸全部去掉

2、滾動條顏色

scrollbar-face-color 滾動條凸出部分的顏色

scrollbar-highlight-color 滾動條空白部分的顏色

scrollbar-shadow-color 立體滾動條陰影的顏色

scrollbar-3dlight-color 滾動條亮邊的顏色

scrollbar-arrow-color 上下按鈕上三角箭頭的顏色

scrollbar-track-color 滾動條的背景顏色

scrollbar-darkshadow-color 滾動條強陰影的顏色

scrollbar-base-color 滾動條的基本顏色

3、 箭行符號滾動條**

4、 一側滾動條**

5、 樸素型滾動條**

6、一側滾動條**

7、 立體型滾動條**

?/p>

CSS 自定義滾動條樣式

css 自定義滾動條樣式 針對 webkit 核心的遊覽器,使用下列偽類改變滾動條預設樣式。webkit scrollbar 滾動條整體部分 webkit scrollbar thumb 滾動條內滑塊 上下或左後移動 webkit scrollbar track 滾動條軌道 webkit scrol...

css 自定義滾動條樣式

總是記不住這幾個修改滾動條的偽類,抄過來記錄一下 你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式 webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑...

css 自定義滾動條樣式

說明 webkit scrollbar 滾動條整體部分,可以設定寬度啥的 webkit scrollbar button 滾動條兩端的按鈕 webkit scrollbar track 外層軌道 webkit scrollbar track piece 內層滾動槽 webkit scrollbar ...