软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 模仿淘宝网滚动条 window.onscroll事件

模仿淘宝网滚动条 window.onscroll事件

一、scrolltop解释:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;">
web前端开发工程师的随记–黑妞haha,My job is my career!day day uper,day day developer! COME ON !
</div>
<script type="text/javascript">
container.scrollTop = 12;
alert(container.offsetHeight);//100
alert(container.scrollHeight);//250
</script>

说明:

container.scrollTop = 12;

这一段文本在这个100*100的DIV内无法完全显示,所以设置了overflow为auto,它会出现一个上下方向的滑动框,假如没有设置 id.scrollTop属性的话,默认情况下滑块位置在顶端。而设置了scrollTop值为12后,滑块的位置改变了,默认显示是卷过了12个象素的文本。如果设置overflow为hidden,则将会无法显示顶部12个象素的文本。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
alert(container.offsetHeight);//100
alert(container.scrollHeight);//250

将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为100+150=250。
注意:设置方式是id.scrollTop,而不是id.style.scrollTop。

IE6 下面的当你滚动浏览器滚动条时document.body.onscroll并不会被触发,因为,它根本没有这个事件,你必须使用window.onscroll事件。


提示:可修改后代码再运行!
    相关阅读
    网友评论
    栏目导航
    推荐软件