自定义滚动条样式 -webkit-scrollbar
webkit 定制滚动条
webkit
支持拥有overflow
属性的区域,列表框,下拉菜单,textarea
的滚动条自定义样式。
-
::-webkit-scrollbar
滚动条整体部分 -
::-webkit-scrollbar-thumb
滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) -
::-webkit-scrollbar-track
滚动条的轨道(里面装有Thumb
) -
::-webkit-scrollbar-button
滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 -
::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分(除去) -
::-webkit-scrollbar-corner
边角,即两个滚动条的交汇处 -
::-webkit-resizer
两个滚动条的交汇处上用于通过拖动调整元素大小的小控件/* 定义滚动条的宽度 */ div::webkit-scrollbar { width: 10px; } /* 定义滚动条的轨道 */ div::webkit-scrollbar-track { background-color: #ccc; } /* 定义滚动条的滑块 */ div::webkit-scrollbar-thumb { background-color: #2bd4d; }
新语法
-
scrollbar Width
:定义滚动条的宽度,有两个值auto
和thin
。不能定义具体的数字。div { scrollbar-width: thin; }
-
Scrollbar Color
:定义滚动条track
和thumb
的颜色。div { scrollbar-color: #6969dd #e0e0e0; }