自定义滚动条样式

原创已于 2022-01-20 17:32:00 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-01-20 17:30:17 首次发布

关于自定义滚动条样式

<style>
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
	width:8px;			 // 纵向滚动条生效
	height:16px;		// 横向滚动条生效
	background-color: #000926;		// 待确认
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #03556B;
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #42EBFF;
}
<style/>