CSS Scrollbar (滚动条)
webkit内核浏览器(Chrome、Edge)类名作用::-webkit-scrollbar滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。::-webkit-scrollbar-button滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
·
webkit内核浏览器(Chrome、Edge)
类名
|
作用
|
::-webkit-scrollbar
|
滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
|
::-webkit-scrollbar-button
|
滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
|
::-webkit-scrollbar-track
|
外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
|
::-webkit-scrollbar-track-piece
|
内层轨道,滚动条中间部分(除去)。
|
::-webkit-scrollbar-thumb
|
滚动条里面可以拖动的那部分
|
::-webkit-scrollbar-corner
|
边角
|
::-webkit-resizer
|
定义右下角拖动块的样式
|
::-webkit-scrollbar {
width: 6px; /* 竖向滚动条宽度 */
height: 6px; /* 横向滚动条高度 */
}
::-webkit-scrollbar-thumb {
border-radius: 10px; /* 滚动条样式 */
-webkit-box-shadow: inset 0 0 3px red; /* 内阴影 */
background-color: blue; /* 滚动条颜色 */
}
::-webkit-scrollbar-thumb:hover {
background-color: black; /* 滚动条悬浮颜色 */
}
::-webkit-scrollbar-track-piece {
background: palegreen; /* 滚动条背景颜色 */
}
::-webkit-scrollbar-button {
background-color: blue; /* 定义两端按钮的样式 */
}
::-webkit-scrollbar-corner {
background: red; /* 右下角重合处的样式*/
}
/* 单独设置悬浮颜色 */
::-webkit-scrollbar-thumb:vertical {
background: yellow; /* 竖向滑块颜色 */
}
::-webkit-scrollbar-thumb:horizontal {
background: orange; /* 横向滑块颜色 */
}
/* 单独设置滚动条背景色 */
::-webkit-scrollbar-track-piece:vertical {
background: palevioletred;
}
::-webkit-scrollbar-track-piece:horizontal {
background: blueviolet;
}
Gecko内核浏览器(Firefox)
* {
scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色 滚动条背景颜色 未生效 */
scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */
}
Trident内核(IE)
滚动条样式
|
支持情况
|
支持浏览器版本
|
可否继承
|
描述
|
scrollbar-3dlight-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框的和滚动条箭头左上边缘的颜色
|
scrollbar-highlight-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框的和滚动条箭头左上边缘的颜色
|
scrollbar-face-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框和滚动条箭头的颜色
|
scrollbar-arrow-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条箭头的颜色
|
scrollbar-shadow-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框的和滚动条箭头右下边缘的颜色
|
scrollbar-dark-shadow-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条槽的颜色
|
scrollbar-base-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条主要构成部分的颜色
|
scrollbar-track-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条轨迹组成部分的颜色
|
更多推荐
已为社区贡献3条内容
所有评论(0)