CSS3自定义滚动条样式，IE9+

六月初六月初 CSS 2018-12-26 17:19:27

网站开发中，常遇到内容超过容器大小。而这个时候，就会出现滚动条。可浏览器自带的滚动条显然无法满足我们的审美要求，这个时候就需要对滚动条进行美化处理。

滚动条的CSS样式主要分为三部分：

1、::-webkit-scrollbar 定义了滚动条整体的样式；

2、::-webkit-scrollbar-thumb 滑块部分；

3、::-webkit-scrollbar-thumb 轨道部分；

实现滚动条美化完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			::-webkit-scrollbar 
			{ 
			    width: 10px; 
			} 
			   
			/*定义滚动条轨道 内阴影+圆角*/ 
			::-webkit-scrollbar-track 
			{ 
			    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); 
			    border-radius: 5px; 
			    background-color: orange;  
			} 
			   
			/*定义滑块 内阴影+圆角*/ 
			::-webkit-scrollbar-thumb 
			{ 
			    border-radius: 0px; 
			    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3); 
			    background-color: olivedrab; 
			}
		</style>
	</head>
	<body>
		<div id="" style="height: 200px;width: 200px;overflow-y: scroll;">
			<div id="" style="height: 800px;width: 100%;background: #f00;">
				
			</div>
		</div>
	</body>
</html>

效果预览：


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！