CSS3自定义滚动条样式（谷歌浏览器）

最新推荐文章于 2024-09-15 21:28:51 发布

凉音、

最新推荐文章于 2024-09-15 21:28:51 发布

阅读量168

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/HRM2454/article/details/105790439

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

样式:

代码：

<div class="bsp-wrapper">
    <div class="content"></div>
</div>

.bsp-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.bsp-wrapper::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 10px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}

.bsp-wrapper::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #e0e0e0;
}

.bsp-wrapper::-webkit-scrollbar-thumb:hover {
	background: #ccc;
}

.bsp-wrapper::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background: #f5f5f5;
}