JS控制滚动条 —— 进度条的简单制作
2014-02-24 13:18
459 查看
简明,习惯先贴上代码:
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高度的内容给,滚动条就自动滚在最下方了。
<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高度的内容给,滚动条就自动滚在最下方了。
相关文章推荐
- js滚动条到最底端控制-制作聊天室必备
- js简单制作一个时钟
- js实现可键盘控制的简单抽奖程序
- 简单的JS控制button颜色随点击更改的实现方法
- JS制作的简单的三级及联
- JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件
- js控制滚动条
- Flash制作可供C#控制的进度条
- 简单的css js控制table隔行变色
- 简单的css js控制table隔行变色
- c#中子线程控制进度条的一个简单例子
- 转过来,我马上要用了,嘿嘿----js和css制作简单的文字闪烁效果
- JS-纯js制作动态成绩表(流程控制语句+js内置对象)
- 简单实用的进度条加载组件loader.js
- 第2款插件:tabBox.js可以非常简单方便地制作选项卡
- 简单Flash进度条制作
- JS+html5制作简单音乐播放器
- js控制滚动条平滑滚动到制定位置
- js控制div滚动条,滚动滚动条使div中的元素可见并居中
- [JavaScript] JS+CSS 制作超级简单的下拉菜单