Open Terence95 opened 7 years ago
webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条
::-webkit-scrollbar 滚动条整体 ::-webkit-scrollbar-thumb 滚动条小方块能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道 (里面装着thumb) ::-webkit-scrollbar-button 滚动条的轨道两端的小按钮,点击微调小方块的位置 ::-webkit-scrollbar-track-piece内层轨道,滚动条中间部分 (除去) ::-webkit-scrollbar-corner 边角,两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
::-webkit-scrollbar 滚动条整体
::-webkit-scrollbar-thumb 滚动条小方块能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道 (里面装着thumb)
::-webkit-scrollbar-button 滚动条的轨道两端的小按钮,点击微调小方块的位置
::-webkit-scrollbar-track-piece内层轨道,滚动条中间部分 (除去)
::-webkit-scrollbar-corner 边角,两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
/*定义滚动条高度及背景*/ .container::-webkit-scrollbar { width: 5px; } /*定义滚动条轨道 内阴影+圆角*/ .container::-webkit-scrollbar-track { /*inset将外部阴影改为内部阴影*/ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } /*定义滑块 内阴影+圆角*/ .container::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } Too young, too simple, always naive
test
前言
滚动条的组成
代码样例