廢話不多說,直接上;
IE專屬的滾動條樣式定義,只能設置各種原始結構的顏色,寬高結構等其他樣式無法修改;
div{
scrollbar-arrow-color: red; /*三角箭頭的顏色*/
scrollbar-face-color: green; /* 立體滾動條的顏色(包括箭頭部分的背景色) */
scrollbar-3dlight-color: blue; /* 立體滾動條亮邊的顏色 */
scrollbar-highlight-color: #ddd; /* 滾動條的高亮顏色(左陰影?) */
scrollbar-shadow-color: pink;/* 立體滾動條陰影的顏色 */
scrollbar-darkshadow-color: #ccc;/* 立體滾動條外陰影的顏色 */
scrollbar-track-color: orange; /* 立體滾動條背景顏色 */
scrollbar-base-color: yellow;/* 滾動條的基色 */
}
webkit內核瀏覽器的滾動條樣式美化:
#scroll-1 div {
width:400px;
height:400px;
}
#scroll-1::-webkit-scrollbar { ::-webkit-scrollbar //滾動條整體部分,其中的屬性有width,height,background,border(就和一個塊級元素一樣)等。
width:60px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button{ ::-webkit-scrollbar-button //滾動條兩端的按鈕。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果.
background-color:black;
}
#scroll-1::-webkit-scrollbar-track{ ::-webkit-scrollbar-track // 外層軌道。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
background:blue;
display: none;
}
#scroll-1::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece //內層軌道,滾動條中間部分。
background:green;
}
#scroll-1::-webkit-scrollbar-thumb{ ::-webkit-scrollbar-thumb //滾動條里面可以拖動的那部分,即滾動條。
background:pink;
border-radius:200px;
}
#scroll-1::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner //邊角.
background:#ddd;
}
#scroll-1::-webkit-scrollbar-resizer { ::-webkit-resizer //定義右下角拖動塊的樣式.
background:red;
}
html部分:
<div id="scroll-1" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; ">
<div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">內容部分內容部分</div>
</div>
以上就是ie和webkit內核瀏覽器的滾動條樣式修改(個中感受自己體會)。
最后:
另外我還找到一種可以修改IE支持的瀏覽器的樣式的插件!試了一下,感覺還可以,只是插件內的代碼還不是很懂;
首先引入JQuery庫,再引入zUI.js這個插件,
寫入你自己修改的樣式代碼(這個選擇器應該是插件中可識別的,不是很懂,但能用):
.zUIpanelScrollBox,.zUIpanelScrollBar{
width:10px;
top:4px;
right:2px;
border-radius:5px;
}
.zUIpanelScrollBox{
background:black;opacity:0.1;
filter:alpha(opacity=10);
}
.zUIpanelScrollBar{
background:red;opacity:0.8;
filter:alpha(opacity=80);
}
最后對插件進行初始化即可
$(function(){
$("#scroll-1").panel({iWheelStep:32});
});
iWheelStep:32;滾動條滾動的速度,可修改。
火狐的暫時還沒有兼容到,后期學習到再補上。
(PS:一起學習,共同進步!有不對的地方希望大佬們幫忙糾正,萬分感謝!)