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

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

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

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

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

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

  1. ::-webkit-scrollbar 定义了滚动条整体的样式；
  2. ::-webkit-scrollbar-thumb 滑块部分；
  3. ::-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

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生