css滚动条样式

关键因素XFactor

已于 2023-08-16 14:41:09 修改

阅读量148

点赞数

分类专栏： CSS 文章标签： css 前端 html

于 2023-01-18 14:17:28 首次发布

本文链接：https://blog.csdn.net/weixin_52923266/article/details/128724753

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文展示了如何使用CSS和`::-webkit-scrollbar`伪元素来定制HTML元素的滚动条，包括去除滚动条以及创建一款具有渐变色效果的炫酷滚动条。通过调整宽度、高度、背景颜色和边框半径等属性，可以实现各种滚动条设计。

摘要由CSDN通过智能技术生成

去除滚动条

div::-webkit-scrollbar {display: none;}

普通滚动条

看下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 300px;
				overflow-y: auto;
			}
			div::-webkit-scrollbar {
				width: 7px; /* 竖向滚动条的宽度 */
				height: 7px; /* 横向滚动条的高度 */
			}
            /* 滚动条样式 */
			div::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background: yellowgreen;
			}
            /* 滚动条轨迹样式 */
			div::-webkit-scrollbar-track{
				border-radius: 10px;
				background: #ededed;
			}
		</style>
	</head>
	<body>
		<div>
			<p>衣带渐宽终不悔,为伊消得人憔悴。</p>
			<p>落红不是无情无,化作春泥更护花。</p>
			<p>儿童相见不相识,笑问客从何处来。</p>
			<p>凤兮凤兮归故乡,遨游四海求其凰。</p>
			<p>纵情山河万里,肆意九州五岳。</p>
			<p>但愿人长久,千里共婵娟。</p>
		</div>
	</body>
</html>

炫酷版滚动条

看下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 300px;
				overflow-y: auto;
			}
			div::-webkit-scrollbar {
				width: 7px; /* 竖向滚动条的宽度 */
				height: 7px; /* 横向滚动条的高度 */
			}
            /* 滚动条样式 */
			div::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: greenyellow;
				background-image: -webkit-linear-gradient(
				45deg,
			  	#12c2e9 25%,
				transparent 25%,
				transparent 50%,
				#c471ed 50%,
				#f64f59 75%,
				transparent 75%,
				transparent);
			}
            /* 滚动条轨迹样式 */
			div::-webkit-scrollbar-track {
				box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: #ededed;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>衣带渐宽终不悔,为伊消得人憔悴。</p>
			<p>落红不是无情无,化作春泥更护花。</p>
			<p>儿童相见不相识,笑问客从何处来。</p>
			<p>凤兮凤兮归故乡,遨游四海求其凰。</p>
			<p>纵情山河万里,肆意九州五岳。</p>
			<p>但愿人长久,千里共婵娟。</p>
		</div>
	</body>
</html>

两款滚动条打造成功!