简明,习惯先贴上代码:
<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高度的内容给,滚动条就自动滚在最下方了。