滚动条的实现思路
Posted chentu279203653
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条的实现思路相关的知识，希望对你有一定的参考价值。
1.滚动条的实现思路：
1.1 在页面创建一个div元素，id为outer，设定该div的长、高、边框样式；
1.2 在id为outer的div里面创建一个子div，id为inner，设定高和outer的一模一样，长为0px。背景色为绿色。
1.3 创建一个按钮，名字为start。当点击start按钮，调用函数move_bar（）让id为inner的div的长度变长一点，然后开启定时器。每次执行定时器，拿inner的当前长度和outer的相比较，如果inner的长度小于outer的长度，则递归调用move_bar（）函数，否则停止递归。
2.示例源码：
<!DOCTYPE html>
<html>
<head>
<title>Progress demo</title>
<meta charset="utf-8">
<style type="text/css">
#box{
width:450px;
height:50px;
border:2px solid blue;
}
#progress-bar{
width:10px;
height:50px;
background-color:green;
}
#ctr-container{
margin-top:10px;
}
#ctr-container input{
width:80px;
height:30px;
}
</style>
</head>
<body>
<div id="box">
<div id="progress-bar"></div>
</div>
<div id="ctr-container">
<input type="button" value="Start" onclick="start()"/>
</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function start(){
move_bar();
}
function move_bar(){
//进度条走一下
var next_width = $("#progress-bar").width()+10;
$("#progress-bar").width(next_width);
window.setTimeout(function(){
var width = $("#progress-bar").width();
if(width < 450){
move_bar();
}
},1000);
}
</script>
</body>
</html>
以上是关于滚动条的实现思路的主要内容，如果未能解决你的问题，请参考以下文章
jQuery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容