CSS-浏览器滚动条

Geogle 浏览器滚动条样式（其它浏览器也可以用）

总览常用属性

选择器	描述
::-webkit-scrollbar	滚动条整体样式
::-webkit-scrollbar-button	一设置滚动条样式，滚动条两端的按钮图标就消失，但可以重新设置图片、新样式
::-webkit-scrollbar-track	外层轨道
::-webkit-scrollbar-track-piece	内层轨道，它会覆盖外层轨道 scrollbar-track 的样式
::-webkit-scrollbar-thumb	滑块
::-webkit-scrollbar-thumb:hover	滑块悬浮
::-webkit-scrollbar-thumb:vertical:hover	纵向滑块悬浮
::-webkit-scrollbar-thumb:horizontal:hover	横向滑块悬浮
::-webkit-scrollbar-corner	边角，两个滚动条交汇处

::-webkit-scrollbar

*::-webkit-scrollbar { // 加上*表示全局
	width: 2px; // 纵向滚动条 宽度
	height: 2px; // 横向滚动条 高度
}

::-webkit-scrollbar-button

*::-webkit-scrollbar-button { // 两端
	width: 10px; // 因为::-webkit-scrollbar已经设置了宽度，这里的纵向宽不生效，横向高不生效
	height: 10px;
	border-radius: 100%;
	background: red;
}

::-webkit-scrollbar-track

*::-webkit-scrollbar-track { // 就是滑块底部整个区域
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: red;
}

::-webkit-scrollbar-track-piece

• 同上，这个和::-webkit-scrollbar-track 二选一，效果一致

::-webkit-scrollbar-thumb

*::-webkit-scrollbar-thumb { // 修改滑块的样式
	background: rgb(80, 94, 77); // 滑块颜色
	border-radius: 5px; // 滑块圆角
}

::-webkit-scrollbar-thumb:hover

• 横、纵滑块悬浮样式，统一颜色就选这个，有单独的颜色下面两个

::-webkit-scrollbar-thumb:vertical:hover

• 纵向滑块悬浮 |

::-webkit-scrollbar-thumb:horizontal:hover

• 横向滑块悬浮

::-webkit-scrollbar-corner

• 当横向滑块在最左时，纵向滑块在最下时，有一个相交形成的区域
• very small area