css修改滚动条默认样式，及修改页面中部分滚动条的写法

很惭愧，写css写了好几年，竟然今天才知道不用自己写滚动条，不用写任何的js，直接改变默认的滚动条样式就能实现想要的效果！今天就来说一说

CSS3自定义滚动条样式 -webkit-scrollbar

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成：

可以滑动的部分，我们叫它滑块
滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成：

::-webkit-scrollbar 定义了滚动条整体的样式；
::-webkit-scrollbar-thumb 滑块部分；
::-webkit-scrollbar-track 轨道部分；

写过后台管理系统的同学们应该会遇到一个布局，上-左右，左边的导航栏有时候会超出屏幕高度出现滚动条，如果显示默认的滚动条就显得太丑了！曾经见过比较好的做法是，鼠标滑到滚动条部分的时候，滚动条（修改过后的能看的）会显示，离开的时候会隐藏，我简单模仿了下
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			/*滚动条整体样式*/
			::-webkit-scrollbar{
				width: 10px;/*竖向滚动条的宽度*/
				height: 10px;/*横向滚动条的高度*/
			}
			::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
				background: #666666;
				border-radius: 5px;
			}
			::-webkit-scrollbar-track{/*滚动条轨道的样式*/
				background: #ccc;
				border-radius: 5px;
			}
			#box{
				width: 200px;
				height: 500px;
				overflow-y: auto;
			}
			ul,li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li>哈哈哈哈hhhhhsdh</li>
				<li>哈哈哈新静安寺</li>
				<li>哈哈哈视剧静安寺</li>
				<li>哈剧新静安寺</li>
				<li>哈哈剧新静安寺</li>
				<li>哈的电视剧安寺</li>
				<li>哈是的电静安寺</li>
				<li>哈或是的静安寺</li>
				<li>哈的电视静安寺</li>
				<li>是的电视剧安寺</li>
				<li>静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
				<li>是的电静安寺</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('box');
		box.onmouseenter = function(){
			this.style.overflowY = 'auto';
		}
		box.onmouseleave = function(){
			this.style.overflowY = 'hidden';
		}
	</script>
</html>

还可以跟border-shadow一起制作效果
在这里插入图片描述

::-webkit-scrollbar-track{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);}/*婊氬姩鏉＄殑婊戣建鑳屾櫙棰滆壊*/
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.05);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}/*婊戝潡棰滆壊*/
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.2);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}
::-webkit-scrollbar{width: 16px;height: 16px;}/* 婊戝潡鏁翠綋璁剧疆*/
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb{border-radius: 999px;border: 5px solid transparent;}
::-webkit-scrollbar-track{box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-thumb{min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-corner{background: transparent;}

注意

如果想要修改页面中部分滚动条的样式，写法如下

/*滚动条整体样式*/
.pop::-webkit-scrollbar{
    width: 6px;/*竖向滚动条的宽度*/
    height: 6px;/*横向滚动条的高度*/
}
.pop::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
    background: #ccc;
    border-radius: 3px;
}
.pop::-webkit-scrollbar-track{/*滚动条轨道的样式*/
    background: #F0F0E1;
    border-radius: 3px;
}

.pop 是添加滚动条的div

来源：CSDN

作者：Baby_加油_

链接：https://blog.csdn.net/qq_34664239/article/details/85343382

标签

css

滚动条

css样式