第49天：封装自己的scrollTop
一、scroll家族
offset 自己的偏移 scroll滚动的
scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候，网页隐藏在屏幕上方的距离 二、页面滚动效果事件 window.onscroll=function(){页面滚动语句} 三、获取scrollTop 谷歌和没有声明DTD<DOCTYPE>：document.body.scrollTop 火狐和其他浏览器：document.documentElement.scrollTop IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop) 兼容性写法： var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
四、json对象表示 var json={key:value,key1:value} 使用方法 var json={name："李白"，age：58}; json名.属性 json.name 李白
五、判断是否声明DTD document.compatMode==="BackCompat" BackCompat 未声明 CSS1Compat 已经声明 注意大小写
六、封装scrollTop
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>封装自己的scrollTop</title>
6 <style>
7 body{
8 height: 3000px;
9 }
10 </style>
11 </head>
12 <body>
13
14 </body>
15 </html>
16 <script>
17 //var json={left:10,right:10};
18 //json.left
19 function scroll(){
20 if(window.pageYOffset!=null){//IE9+和其他浏览器
21 return{
22 left:window.pageXOffset,
23 top:window.pageYOffset
24 }
25 }else if(document.compatMode=="CSS1Compat"){//判断是否声明DTD
26 return{//声明的
27 left:document.documentElement.scrollLeft,
28 top:document.documentElement.scrollTop
29 }
30 }
31 return{//未声明的
32 left:document.body.scrollLeft,
33 top:document.body.scrollTop
34 }
35 }
36
37 window.onscroll=function(){
38 console.log(scroll().top);
39 }
40 </script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-10-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
