优秀的编程知识分享平台

网站首页 > 技术文章 正文

网页自定义滚动条的样式(网页自定义滚动条的样式是什么)

nanyue 2024-10-03 23:47:27 技术文章 14 ℃

::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的

body::-webkit-scrollbar{
// 样式
}

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track 外层轨道

::-webkit-scrollbar-track-piece 内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

.content::-webkit-scrollbar {
	/*滚动条整体样式*/
	/*高宽分别对应横竖滚动条的尺寸*/
	height: 50px;
	width: 5px;
}
.content::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #535353;
}

.content::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background: #fff;
}
.content::-webkit-scrollbar-button{
	width: 6px;
	height: 6px;
	background-color: red;
}
最近发表
标签列表