css默认的滚动条样式确实太丑了，想不想自定义这个滚动条的样式呢？滚动条样式的相关属性：
滚动条整体样式：-webkit-scrollbar
滚动条里面小方块样式：-webkit-scrollbar-thumb
滚动条里面轨道样式：-webkit-scrollbar-track
知道了滚动条的相关属性，改造起来就非常方便了，可以想怎么改就怎么改。
下面看看博主自己改造的滚动条样式：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css滚动条样式</title>
<style type="text/css">
.box{width: 600px;height: 400px;margin: 100px auto;border: 4px solid #14f7ee;border-right: 0;box-shadow: 5px 5px 5px #0099ff40;background: #0099ff1f;border-radius: 7px;}
.main{overflow-x: hidden;overflow-y: auto;color: #000;font-size: 16px;height: 100%;}
.main p{height:100px;padding: 10px;}
/*-------滚动条整体样式----*/
.main::-webkit-scrollbar {width:8px;height:8px;}
/*滚动条里面小方块样式*/
.main::-webkit-scrollbar-thumb {border-radius:100px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:#0099ff8a;}
/*滚动条里面轨道样式*/
.main::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1);}
</style>
</head>
<body>
<div class="box">
<div class="main">
<p>心月IT博客</p>
<p>网站建设</p>
<p>web前端</p>
<p>css默认滚动条样式自定义改造</p>
</div>
</div>
</body>
</html>效果图：
【特别注意】：实现单个div里面的内容滚动，必需满足以下3个条件：
1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值；
2、其中的内容高度必须超过它本身的高度；
3、必需要添加这个overflow:auto属性。
附：overflow的属性和不同值得作用
1.overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示;
2.overflow:auto;在需要时剪切内容并添加滚动条;
3.overflow:hidden;不显示超过对象高度的内容;
4.overflow:scroll;总是显示纵向滚动条;
5.overflow 水平及垂直方向内容溢出时的设置;
6.overflow-x 水平方向内容溢出时的设置;
7.overflow-y 垂直方向内容溢出时的设置。
