CSS3 設定瀏覽器捲軸樣式

/* 捲軸樣式設定，適用全站 */
::-webkit-scrollbar {
height:12px;
overflow:visible;
width:12px; /* 寬度*/
}
::-webkit-scrollbar-thumb {
background-color:#96E100; /* 原捲軸顏色*/
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 0px;
min-height:28px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); /* 內陰影*/
}
::-webkit-scrollbar-thumb:hover {/* 滑鼠移到捲軸後的顏色*/
background-color:#82C300;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {/* 滑鼠點選捲軸拖拉時的顏色*/
background-color:#6EA500;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);
}

若要套用的單一區塊，請在前面加上區塊指定，例：

.box::-webkit-scrollbar{}

.box::-webkit-scrollbar-thumb{}

.box::-webkit-scrollbar-thumb:hover{}

.box::-webkit-scrollbar-thumb:active{}

以上僅適用Chrome、Safari，

IE Edge、Firefox並不支援

舊版IE、Opera請用另一種css2的設定