码迷,mamicode.com
首页 > 其他好文 > 详细

第49天:封装自己的scrollTop

时间:2017-10-11 01:01:05      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:json对象   pat   表示   logs   对象   on()   效果   script   strong   

一、scroll家族

offset 自己的偏移
scroll滚动的

scrollTopscrollLeft
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>

 

第49天:封装自己的scrollTop

标签:json对象   pat   表示   logs   对象   on()   效果   script   strong   

原文地址:http://www.cnblogs.com/le220/p/7648370.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!