共计 1546 个字符,预计需要花费 4 分钟才能阅读完成。
::-webkit-scrollbar 应用属性阐明 详情见:::-webkit-scrollbar
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条款式。
备注:如果没有设置 overflow:scroll;,元素的滚动条将不会显示。
备注:::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器(例如,Chrome、Edge、Opera、Safari、iOS 上所有的浏览器,以及其余基于 WebKit 的浏览器)上可用。滚动条款式的规范办法可用于 scrollbar-color 和 scrollbar-width。
CSS 滚动条选择器
你能够应用以下伪元素选择器去批改基于 webkit 的浏览器的滚动条款式:
- ::-webkit-scrollbar——整个滚动条。
- ::-webkit-scrollbar-button——滚动条上的按钮(高低箭头)。
- ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
- ::-webkit-scrollbar-track——滚动条轨道。
- ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道局部。
- ::-webkit-scrollbar-corner——当同时有垂直滚动条和程度滚动条时交汇的局部。通常是浏览器窗口的右下角。
- ::-webkit-resizer——呈现在某些元素底角的可拖动调整大小的滑块。
CSS 应用示例
实用所有能够滚动的元素间接 ::-webkit-scrollbar 结尾
/* 1, 滚动条 */ | |
::-webkit-scrollbar { | |
width: 15px; /* 纵向滚动条 宽度 */ | |
height: 15px; /* 横向滚动条 高度 */ | |
background: blue; /* 整体背景 */ | |
border-radius: 10px; /* 整体 圆角 * | |
} | |
/* 2, 滚动条两端的按钮 */ | |
::-webkit-scrollbar-button{ | |
width: 15px; /* 横向滚动条 宽度 */ | |
height: 15px; /* 纵向滚动条 高度 */ | |
background: black; | |
border-radius: 10px; | |
} | |
/* 3, 外层轨道 */ | |
::-webkit-scrollbar-track { | |
/* background: red; */ | |
border-radius: 10px; | |
} | |
/* 4. 内层轨道,它会笼罩外层轨道的款式。*/ | |
::-webkit-scrollbar-track-piece { | |
width: 5px; | |
background-color:red; | |
margin: 0 -2px 0; | |
} | |
/* 5, 滑块 */ | |
::-webkit-scrollbar-thumb { | |
background: #bec5ca; | |
min-height: 50px; | |
min-width: 50px; | |
border-radius: 10px; | |
} | |
/* 纵向滑块悬浮 */ | |
::-webkit-scrollbar-thumb:vertical:hover {background: yellow;} | |
/* 横向滑块悬浮 */ | |
::-webkit-scrollbar-thumb:horizontal:hover {background: pink} | |
/* 6, 边角,两个滚动条交汇处 */ | |
::-webkit-scrollbar-corner{background: blue;} |
只实用于特定的局部,须要在选择器之前附加元素,增加一个类名,比方
.part::-webkit-scrollbar { | |
width: 15px; /* 纵向滚动条 宽度 */ | |
height: 15px; /* 横向滚动条 高度 */ | |
background: blue; /* 整体背景 */ | |
border-radius: 10px; /* 整体 圆角 * | |
} |
正文完