谷歌滾動條設定 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>