zoukankan      html  css  js  c++  java
  • 第49天:封装自己的scrollTop

    一、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>
  • 相关阅读:
    python基础之列表解析
    初学者学习python2还是python3?
    给曾经是phper的程序员推荐个学习网站
    详解python2 和 python3的区别
    Python如何进行中文注释
    import方法引入模块详解
    详解python 局部变量与全局变量
    131-19. 删除链表的倒数第N个节点
    65.django中关于跨域访问设置
    130-283. 移动零
  • 原文地址:https://www.cnblogs.com/le220/p/7648370.html
Copyright © 2011-2022 走看看