css设置滚动条、并设置滚动条样式

最新推荐文章于 2024-04-10 23:48:49 发布

久遇^O^

最新推荐文章于 2024-04-10 23:48:49 发布

阅读量4.7k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44866853/article/details/127089026

版权

1.overflow设置滚动条

/* 设置y轴滚动条 */
overflow-y:auto
/* 设置x轴滚动条 */
overflow-x:auto

2.设置滚动条样式

    		::-webkit-scrollbar {
				width: 8px;
				height: 10px;
			}
			
			::-webkit-scrollbar-button {
				background-color: red;
			}
			
			::-webkit-scrollbar-track-piece {
				background: yellow;
			}
			
			::-webkit-scrollbar-thumb {
				background: blue;
				border-radius: 4px;
			}

3.html整体代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#main {
				width: 500px;
				height: 200px;
				overflow-y: auto;
				background: #9aacc4;
			}
			
			/*修改滚动条样式*/
			
			#main::-webkit-scrollbar {
				width: 4px;
				/*高宽分别对应横竖滚动条的尺寸*/
				height: 0px;
			}
			
			#main::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: rgba(0, 0, 0, 0.2);
			}
			
			#main::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				border-radius: 0;
				background: rgba(0, 0, 0, 0.1);
			}
			
			#main1 {
				width: 474px;
				height: 150px;
				margin-right: 20px;
				overflow-y: auto;
				background: darkseagreen;
				margin: 10px;
			}
			/*修改滚动条样式*/
			
			#main1::-webkit-scrollbar {
				width: 8px;
				height: 10px;
			}
			
			#main1::-webkit-scrollbar-button {
				background-color: red;
			}
			
			#main1::-webkit-scrollbar-track-piece {
				background: yellow;
			}
			
			#main1::-webkit-scrollbar-thumb {
				background: blue;
				border-radius: 4px;
			}
			
			ul li {
				margin-bottom: 30px;
				margin-right: 10px;
				background: chartreuse;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<ul>
				<li>文本1文本1文本1文本1文本1</li>
				<li>文本2文本2文本2文本2文本2</li>
				<li>文本3文本3文本3文本3文本3</li>
				<li>文本4文本4文本4文本4文本4</li>
				<li>文本5文本5文本5文本5文本5</li>
			</ul>
			<div id="main1">
				<ul>
					<li>文本1</li>
					<li>文本1</li>
					<li>文本1</li>
					<li>文本1</li>
					<li>文本1</li>
				</ul>
			</div>
		</div>
	</body>

</html>