利用js实现滚动条效果

最新推荐文章于 2021-12-01 12:01:49 发布

浅浅呐

最新推荐文章于 2021-12-01 12:01:49 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： js 前端滚动条

本文链接：https://blog.csdn.net/qq_41445106/article/details/95922816

版权

前端专栏收录该内容

80 篇文章 1 订阅

订阅专栏

今天给大家分享如何利用原生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>

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

浅浅呐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用js实现滚动条效果

今天给大家分享如何利用原生js来实现滚动条的效果代码附上<meta charset="utf-8"><title></title><style type="text/css"> .outer{ width:300px; height: 40px; background:#eee ; } .inner{ width: 0;...
复制链接

扫一扫