CSS Scrollbar (滚动条)

webkit内核浏览器（Chrome、Edge）类名作用::-webkit-scrollbar滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。::-webkit-scrollbar-button滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

SeriousLose

8853人浏览 · 2021-05-12 15:18:13

SeriousLose · 2021-05-12 15:18:13 发布

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	设置滚动条轨迹组成部分的颜色