【CSS】改变滚动条样式，给滚动条小姐姐化个妆

美化Windows滚动条

最新推荐文章于 2022-04-23 17:25:06 发布

原创最新推荐文章于 2022-04-23 17:25:06 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

CSS系列专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS定制Windows下滚动条的外观，包括调整宽度、背景颜色及圆角等属性，实现美观且个性化的滚动条样式。

众所周知，Windows 下渲染的原生滚动条并不是那么好看。
既然我们知道 CSS 相当于化妆品，那么我们怎么通过 CSS 让滚动条小姐姐变个妆呢？

Windows 7下的默认滚动条样式
在这里插入图片描述

talk is cheap, show me the code.

::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-track{
	background: #f6f6f6;
	border-radius:2px;
}
::-webkit-scrollbar-thumb{
	background: #cdcdcd;
	border-radius:2px;
}
::-webkit-scrollbar-thumb:hover{
	background: #747474;
}
::-webkit-scrollbar-corner {
	background: #f6f6f6;
}