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

时间:2022-10-26 07:56:30

  简明,习惯先贴上代码:

<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="增加" onclick="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高度的内容给,滚动条就自动滚在最下方了。