利用js实现滚动条效果

90 阅读 0 评论 60 点赞

我是靠谱客的博主大气季节，最近开发中收集的这篇文章主要介绍利用js实现滚动条效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天给大家分享如何利用原生js来实现滚动条的效果

代码附上

<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer{
width:300px;
height: 40px;
background:#eee ;
}
.inner{
width: 0;
height: 40px;
background: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<script type="text/javascript">
var oInner=document.getElementsByClassName('inner')[0]
var i=0
var timer=setInterval(function(){
i++
if(i==100){
clearInterval(timer)
}
oInner.style.width=i+"px"
},20)
</script>
</body>
</html>

此时就可实现简单的滚动条效果啦~