CSS滾動條選擇器
::-webkit-scrollbar — 整個滾動條.
::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
::-webkit-scrollbar-track — 滾動條軌道.
::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分.
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).
示例代碼
<html>
<body>
<div></div>
</body>
</html>
<style>
div{
width:100%;
height: 200vh;
background-color: #009688;
}
div::-webkit-scrollbar-track{
background: #efefef;
border-radius:2px;
}
div::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
background: #333;
}
div::-webkit-scrollbar-corner{
background: #179a16;
}
</style>
示例圖片
css3滾動條樣式
示例
