模仿淘宝网滚动条 window.onscroll事件
一、scrolltop解释: Copy to Clipboard![]() <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![]() alert(container.scrollHeight);//250 将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为100+150=250。 提示:可修改后代码再运行! (编辑:91站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 星雨光刻工艺来袭,新机将有崭新颜值手感?来看OPPO官方爆料
- 20%处理器依靠外包 Intel押注台积电3nm 14代酷睿就要上
- “星光中国芯工程”20周年创新成果与展望报告
- OPPO Reno7系列上线,独家首发全新RGBW传感器IMX709
- 腾讯WeCity智慧杆场景解决方案发布,五大建设保障推动新基建
- 同样i5-11320H处理器笔记本,为何分数差10万分?关键在内存
- Mac mini要用!苹果自研芯片M2泄露 效能超越Intel
- OPPO A95 4G马来西亚正式登场 搭载骁龙662 SoC 支持60Hz刷新
- 今晚19 30正式上线!折叠屏荣耀Magic V重磅卖点抢先看
- “就一套防护服,那天没敢喝一口水”—抗疫前线一名网络工程