加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

仿照淘宝网转动条 window.onscroll变乱

发布时间:2018-10-02 08:26:15 所属栏目:运营 来源:站长网
导读:一、scrolltop表明: Copy to Clipboard 引用的内容:[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 caree

一、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变乱。


提醒:可修改儿女码再运行!

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读