css修改滚动条样式

最新推荐文章于 2024-05-21 00:00:00 发布

Ariel_ckr

最新推荐文章于 2024-05-21 00:00:00 发布

阅读量364

点赞数

分类专栏： html+css+js+框架文章标签： css修改滚动条样式

本文链接：https://blog.csdn.net/Ariel_201311/article/details/84134353

版权

html+css+js+框架专栏收录该内容

36 篇文章 3 订阅

订阅专栏

css给一个内容盒子设置overflow:auto，当盒子里面的内容超过盒子的宽高时，会自动出现滚动条：
在这里插入图片描述
这种滚动条在一些页面美观要求较高的网页上会显得很突兀，下面来修改滚动条的样式吧~
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test {
				width: 200px;
				height: 200px;
				overflow: auto;
				margin: 5px;
				border: none;
				background-color: #f2f2f2;
				margin: 200px auto;
			}
			.test-1::-webkit-scrollbar {
				/*滚动条整体样式*/
				width: 10px;
				/*高宽分别对应横竖滚动条的尺寸*/
				height: 1px;
			}
			.test-1::-webkit-scrollbar-thumb {
				/*滚动条里面小方块*/
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: #535353;
			}
			
			.test-1::-webkit-scrollbar-track {
				/*滚动条里面轨道*/
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: #EDEDED;
			}
		</style>
	</head>
	<body>
		<div class="test test-1">
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
		</div>
	</body>
</html>

在这里插入图片描述

Ariel_ckr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css修改滚动条样式

css给一个内容盒子设置overflow:auto，当盒子里面的内容超过盒子的宽高时，会自动出现滚动条：这种滚动条在一些页面美观要求较高的网页上会显得很突兀，下面来修改滚动条的样式吧~::-webkit-scrollbar::-webkit-scrollbar-thumb::-webkit-scrollbar-track&lt;!DOCTYPE html&gt;&lt;html la...
复制链接

扫一扫

专栏目录