css书写滚动条

上周项目中需要滚动条，对于我这个菜鸟来说，简直了。。。

下面就贴一下，我整理出的最简单的滚动条的代码吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.scrollbar{
height: 300px;
width: 200px;/*这个是灰色部分的宽度*/
background: #F5F5F5;
overflow-y: scroll;
border: 1px solid black;
}
/*这个指的是滚动条中有颜色的部分*/
.force-overflow{min-height: 450px;}
/*::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）*/
#style-3::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);//这个是滚动条的阴影
background-color: #F5F5F5;
}
/*::-webkit-scrollbar 滚动条整体部分*/
#style-3::-webkit-scrollbar{
width: 6px;/*滚动条的宽度*/
background-color: #F5F5F5;/*滚动条的背景色*/
}
/*::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）*/
#style-3::-webkit-scrollbar-thumb{
background-color: #67AFF6;/*修改滚动条的颜色*/
}
</style>
</head>
<body>
<div class="scrollbar" id="style-3">
<div class="force-overflow">
我就是想写出一个滚动条，然后里面有文字可以滚动，我现在的位置就是显示文字内容的地方。其实出现滚动条的一个最主要的就是内层的div的height要高于外层
</div>
</div>
</body>
</html>

再来一个处理了滚动条圆角的滚动条

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

.scrollbar{
height: 300px;
width: 200px;//这个是灰色部分的宽度
background: #F5F5F5;
overflow-y: scroll;
border: 1px solid black;
}
.force-overflow{min-height: 450px;}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
#style-3::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
#style-3::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
</style>
</head>
<body>
<div class="scrollbar" id="style-3">
<div class="force-overflow">
我就是想写出一个滚动条，然后里面有文字可以滚动，我现在的位置就是显示文字内容的地方。其实出现滚动条的一个最主要的就是内层的div的height要高于外层
</div>
</div>
</body>
</html>

写出这个滚动条主要参考了：http://www.xuanfengge.com/css3-webkit-scrollbar.html

其他需要的滚动条的样式也可以继续参考这个网站进行修改。

posted @ 2017-07-29 19:23  MonicaSmile  阅读(316)  评论(0)    收藏  举报