使用CSS样式修改默认的滚动条

最新推荐文章于 2024-09-25 18:30:38 发布

YSJ_Dumpling

最新推荐文章于 2024-09-25 18:30:38 发布

阅读量228

点赞数

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

本文链接：https://blog.csdn.net/YSJ_Dumpling/article/details/103818174

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

相关知识点：

css滚动条选择器：
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

以下是实现修改滚动条修改的全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.header{
				width: 500px;
				height: 100px;
				border: 1px solid black;
				overflow-x: hidden;
				overflow-y: auto;
			}
			::-webkit-scrollbar {

			/*滚动条整体样式*/
			/*高宽分别对应横竖滚动条的尺寸*/
			width: 6px; 
			
			height: 6px;
			
			}
			
			::-webkit-scrollbar-thumb {
			
			/*滚动条里面小方块*/
			
			border-radius: 5px;
			
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			
			background: rgba(120, 90, 255,0.5);
			
			}
			
			::-webkit-scrollbar-track {
			
			/*滚动条里面轨道*/
			
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			
			border-radius: 0;
			
			background: rgba(154, 129, 255, 0.5);
			
			}

		</style>
	</head>
	<body>
		<div class="header">
			<!--<div class="nav"></div>-->
			<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
			<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
			<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
			<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
		</div>
	</body>
</html>

出现效果如下图：
在这里插入图片描述
在这个div框中，由于内容的长度和高度都超出了该div的宽高，给该div设置了水平设置了溢出隐藏，overflow-x:hidden;即在水平方向即使溢出了，也会隐藏掉；为了使竖直方向上出现滚动条，只需设置overflow-y:auto;即可出现滚动条，超出部分级可以使用滚动条拖动。
大家可以根据自己的需求把这个滚动条写得更好看一些。