JS控制滚动条 —— 进度条的简单制作

　　简明，习惯先贴上代码：

<div id="test" style="border:solid 0px black;width:100px;height:100px;position:static;overflow-y:auto;">
    a:a<br />
    b:b<br />
    c:c<br />
</div>
<input type="button" value="增加" οnclick="progress()" />
<script type="text/javascript">
function progress(){
	var test = document.getElementById('test');
	test.innerHTML = test.innerHTML + "test:test<br />";
	test.scrollTop = test.scrollHeight - test.offsetHeight;
}
</script>

 　　id为test的div，其style里面通过设置overflow-y:auto，来自动显示滚动条，即超过显示域高度滚动条出现。设置height:100px就当设置了显示域的高度。

　　通过一个按键“增加”执行progress()往div里面添加内容。每点击一次添加一行test:test，直到文本内容高度overflow（超出可见域或显示域高度100px），出现滚动条。最后设置scrollTop，简单解释：它就表示滚动条在什么位置，0表示最顶上，如果设置为0，就显示文本0~100px高度的内容，如果设置为10，就显示10~110px的内容，所以设置为scrollHeigh-offsetHeight（内容总高度-显示域高度），其中offsetHeight=100px，就得到最后一段100px高度的内容给，滚动条就自动滚在最下方了。

转载于:https://www.cnblogs.com/iwish/p/3564453.html