1. 程式人生 > 實用技巧 >Html滾動條樣式

Html滾動條樣式

/* 滾動條樣式 */
.scrollBarStyle {
overflow-y: auto;
height: 400px;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 2px;
margin-top: 3px;
padding-left: 5px;
}

.scrollBarStyle::-webkit-scrollbar { /*滾動條整體樣式*/
width: 6px; /*高寬分別對應橫豎滾動條的尺寸*/
height: 25px;
}

.scrollBarStyle::-webkit-scrollbar-thumb { /*滾動條裡面小方塊*/

border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #D4D4D4;
background: #D4D4D4;
}

.scrollBarStyle::-webkit-scrollbar-track { /*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 0 #0A5EC6;
background: #0A5EC6;
}