CSS实现自定义浏览器滚动条样式

最新推荐文章于 2024-04-06 00:41:41 发布

指尖时光.

最新推荐文章于 2024-04-06 00:41:41 发布

阅读量102

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/Ethan_zxt/article/details/130426315

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

css代码

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.custom-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
.custom-scroll::-webkit-scrollbar-track {
	border-radius: 3px;
	background-color: #ffffff;
}

/*定义滑块 内阴影+圆角*/
.custom-scroll::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #dddee0;
}