html 自定义ScrollBar

最新推荐文章于 2024-07-29 09:26:52 发布

原创最新推荐文章于 2024-07-29 09:26:52 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS3来美化网页滚动条，包括设置滚动条的宽度、颜色、背景和圆角等，展示了多种样式的滚动条实现，适用于Chrome浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="CSS3滚动条美化,-webkit-scrollbar滚动条美化，html滚动条皮肤" />
<meta name="description" content="CSS3,-webkit-scrollbar滚动条皮肤美化，实现各种样式以及形状的滚动条" />
<title>CSS3滚动条美化,CSS3滚动条皮肤</title>
<style type="text/css">
body{
	padding-bottom:30px;
}
.test {
	width: 500px;
	height: 200px;
	background-color: #efefef;
	overflow: scroll;
	overflow-x: hidden;
	margin-top: 30px;
}
.test>div {
	width: 500px;
	height: 300px;
}
.test1::-webkit-scrollbar {
 width: 8px;
}
 .test1::-webkit-scrollbar-track {
 background-color:#808080;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .test1::-webkit-scrollbar-thumb {
 background-color:#ff4400;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.test2::-webkit-scrollbar {
 width: 8px;
}
 .test2::-webkit-scrollbar-track {
 background-color:#fff;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
 border:1px solid #ccc;
}
 .test2::-webkit-scrollbar-thumb {
 background-color: #F90;
 background-image: -webkit-linear-gradient(45deg,  rgba(255, 255, 255, .4) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.test3::-webkit-scrollbar {
 width: 12px;
}
 .test3::-webkit-scrollbar-track {
 background-color:#f5f5f5;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .test3::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,  40% 0%,  75% 84%,  from(#4D9C41),  to(#19911D),  color-stop(.6, #54DE5D));
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.test4{
	width:500px;
	overflow:scroll !important;
	width:600px;
}
.test4>div{
	width:1000px;
}
.test4::-webkit-scrollbar {
 width: 12px;
 height:12px;
}
 .test4::-webkit-scrollbar-track {
 background-color:#f5f5f5;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .test4::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background-color: #F90;
  background-image: -webkit-linear-gradient(90deg,  rgba(255, 255, 255, .4) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.test5::-webkit-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-webkit-scrollbar-track {
 background-color:#f5f5f5;

}
 .test5::-webkit-scrollbar-thumb {
 background-color: #d52828;
}
</style>
</head>

<body>
<div style="width:500px;margin:0 auto; text-align:center">
	<div class="test test1">
		<div>请在chrome浏览器下查看<p><a style="text-decoration:none; color:#808080;" href="http://www.pengyaou.com/LegendsZ/File/2014/11/12/20141112214328972.html">点击查看源代码</a></p></div>
	</div>
	<div class="test test5">
		<div></div>
	</div>
	<div class="test test2">
		<div></div>
	</div>
	<div class="test test3">
		<div></div>
	</div>
	<div class="test test4">
		<div></div>
	</div>
	
</div>


</div>

</body>
</html>