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>
  • 相关阅读:
    2019 SDN阅读作业
    第02组 Alpha冲刺(2/6)
    2019 SDN上机第3次作业
    第02组 Alpha冲刺(1/6)
    2019 SDN上机第2次作业
    bzoj 3207 可持久化线段树
    bzoj 3524 可持久化线段树
    HDU 4757 可持久化trie树
    bzoj 3197 DP
    poj 2104 可持久化线段树
  • 原文地址:https://www.cnblogs.com/le220/p/7648370.html
Copyright © 2011-2022 走看看