1. 程式人生 > >自定義滾動條樣式

自定義滾動條樣式

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
width: 4px;
height: 8px;
background-color: #F5F5F5;
}

/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
-o-scrollbar {
width: 4px;
height: 4px;
background-color: #F5F5F5;
}

/*定義滾動條軌道 內陰影+圓角*/
-o-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定義滑塊 內陰影+圓角*/
-o-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
-moz-scrollbar {
width: 4px;
height: 4px;
background-color: #F5F5F5;
}

/*定義滾動條軌道 內陰影+圓角*/
-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定義滑塊 內陰影+圓角*/
-moz-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
-scrollbar {
width: 4px;
height: 4px;
background-color: #F5F5F5;
}

/*定義滾動條軌道 內陰影+圓角*/
-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定義滑塊 內陰影+圓角*/
-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}


更多專業前端知識,請上 【猿204