可以通過以下屬性設定滾動條的顏色:
樣式標籤屬性
描述
scrollbar-3dlight-color
設定或獲取滾動條上滾動按鈕和滾動滑塊的左上顏色。
scrollbar-arrow-color
設定或獲取滾動箭頭標識的顏色
scrollbar-base-color
設定或獲取滾動條的主要顏色，其中包含滾動按鈕和滾動滑塊
scrollbar-darkshadow-color
設定或獲取滾動條上滑槽的顏色
scrollbar-face-color
設定或獲取滾動條和滾動條的滾動箭頭的顏色
scrollbar-highlight-color
設定或獲取滾動框和滾動條滾動箭頭的左上邊緣顏色
scrollbar-shadow-color
設定或獲取滾動框和滾動條滾動箭頭的右下邊緣顏色
scrollbar-track-color
設定或獲取滾動條軌跡元素的顏色
以div為例演示以下以上屬性的效果
未設定任何樣式的滾動條:
style ="width:50%; height:100px;overflow: scroll;">
樣式: scrollbar-3dlight-color
說明: 設定滾動條的滾動按鈕和滾動滑塊的左上顏色為藍色
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-3dlight-color: blue; ">
樣式: scrollbar-arrow-color
說明: 設定滾動箭頭標識的顏色為藍色
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-arrow-color: blue; ">
樣式: scrollbar-base-color
說明: 設定滾動的主要顏色為藍色, 包含滾動條按鈕和滾動條滑塊
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-base-color:blue; ">
樣式: scrollbar-darkshadow-color
說明:
設定滾動條的滾動按鈕和滾動滑塊右下邊緣的顏色為藍色
(感覺和
scrollbar-shadow-color差不多的樣子,不過有細小的差別)
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-darkshadow-color:blue; ">
樣式: scrollbar-face-color
說明:
設定滾動條和滾動條箭頭的顏色為藍色
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-face-color:blue; ">
樣式: scrollbar-highlight-color
說明:
設定滾動框和滾動條滾動箭頭的左上邊緣顏色為藍色
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-highlight-color:blue; ">
樣式: scrollbar-shadow-color
說明: 設定滾動框和滾動條滾動箭頭的右下邊緣顏色為藍色
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-shadow-color:blue; ">
樣式: scrollbar-track-color
說明: 設定滾動條軌跡的底色為藍色
html: style ="width:50%; height:100px;overflow: scroll;scrollbar-track-color: blue; ">
多個樣式的組合可以實現不同效果, 如 +
html: style ="width:50%; height:100px;overflow: scroll; scrollbar-face-color:#507cd1; scrollbar-track-color:#f4f1ec; ">
^ ^ 以為寫東西很簡單, 自己整理才發現很麻煩, 或者是
我還不熟悉, 很佩服在網上分享心得的朋友, 我要想你們學習.....
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...