谷歌滾動條設置 IE滾動條設置

google瀏覽器chrome設置滾動條樣式
.courrlist ::-webkit-scrollbar {
    width: 10px;
}


.courrlist ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 6px;
    border-radius: 6px;
}


.courrlist ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: rgba(145,145,145,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.courrlist ::-webkit-scrollbar-thumb:window-inactive {
background: rgba(145,145,145,0.4);
}
 
IE滾動條設置
 
 
滾動條顏色


<style>
body{
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #eeeeee;
scrollbar-darkshadow-color: #FFFFFF
}
</style>


代碼說明：
scrollbar-face-color 滾動條凸出部分的顏色
scrollbar-highlight-color 滾動條空白部分的顏色
scrollbar-shadow-color 立體滾動條陰影的顏色
scrollbar-3dlight-color 滾動條亮邊的顏色
scrollbar-arrow-color 上下按鈕上三角箭頭的顏色
scrollbar-track-color 滾動條的背景顏色
scrollbar-darkshadow-color 滾動條強陰影的顏色
scrollbar-base-color 滾動條的基本顏色


箭行符號滾動條代碼


<style type="text/css">
<!--
body {
scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white
}
-->
</style>


 一側滾動條代碼


<style type="text/css">
<!--
body {
scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white
}
-->
</style>


樸素型滾動條代碼


<style type="text/css">
<!--
body {
scrollbar-face-color: white;
scrollbar-highlight-color: hotpink;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white
}
-->
</style>


一側滾動條代碼


<style type="text/css">
<!--
body {
scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white
}
-->
</style>


 立體型滾動條代碼


<style type="text/css">
<!--
BODY {
scrollbar-face-color: pink;
scrollbar-highlight-color: deeppink;
scrollbar-shadow-color: lavenderblush;
scrollbar-3dlight-color: lavenderblush;
scrollbar-arrow-color: white;
scrollbar-track-color: lavenderblush;
scrollbar-darkshadow-color: deeppink
}
-->
</style>