模仿淘宝网滚动条 window.onscroll事件
发布时间：2018-10-02 15:47:59 所属栏目：运营 来源：站长网
导读：一、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 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 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 Clipboard引用的内容：[www.veryhuo.com]
alert(container.offsetHeight);//100 alert(container.scrollHeight);//250 将依次输出100，250。因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以scrollHeight值为100+150=250。 提示：可修改后代码再运行! （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读