zoukankan      html  css  js  c++  java
  • scrollTop和scrollLeft的兼容解决万全方法

    1、各浏览器下 scrollTop的差异 
    IE6/7/8: 
    对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ; 
    对于有doctype声明的页面则可以使用 document.documentElement.scrollTop; 
    Safari: 
    safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ; 
    Firefox: 
    火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ; 
    2、获取scrollTop值 
    完美的获取scrollTop 赋值短语 : 
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

    通过这句赋值就能在任何情况下获得scrollTop 值。 
    仔细观察这句赋值,你发现啥了没?? 
    没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。 
    因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ; 
    当页面滚动条刚好在最顶端,即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。 
    而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用.. 
    所以说到头还是IE的问题咯. 杯具… 
    精神有点恍惚,不知道有没有表达清楚。 
    不过最后总结出来这句实验过OK,大家放心使用; 
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

    DTD相关说明:

    页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。

    页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。

    在 IE 和 Firefox 中均是如此。

    为了兼容,不管有没有 DTD,可以使用如下代码:

    1 var scrollTop = window.pageYOffset  //用于FF
    2                 || document.documentElement.scrollTop  
    3                 || document.body.scrollTop  
    4                 || 0;

    documentElement 和 body 相关说明:

    body是DOM对象里的body子节点,即 <body> 标签;

    documentElement 是整个节点树的根节点root,即<html> 标签;

    DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

    以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。

    为了能万全解决兼容性的问题,我们需要封装自己的函数:

     1 function scroll() {
     2         if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
     3         {
     4             return {
     5                 left: window.pageXOffset,
     6                 top: window.pageYOffset
     7             }
     8         }
     9         else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    10           // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    11         {
    12             return {
    13                 left: document.documentElement.scrollLeft,
    14                 top: document.documentElement.scrollTop
    15             }
    16         }
    17         return { //  剩下的肯定是怪异模式的
    18             left: document.body.scrollLeft,
    19             top: document.body.scrollTop
    20         }
    21     }

    数据的格式采用json格式。

    实例如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></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   json.top
    19     function scroll() {
    20         if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    21         {
    22             return {
    23                 left: window.pageXOffset,
    24                 top: window.pageYOffset
    25             }
    26         }
    27         else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    28           // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    29         {
    30             return {
    31                 left: document.documentElement.scrollLeft,
    32                 top: document.documentElement.scrollTop
    33             }
    34         }
    35         return { //  剩下的肯定是怪异模式的
    36             left: document.body.scrollLeft,
    37             top: document.body.scrollTop
    38         }
    39     }
    40     window.onscroll = function() {
    41         console.log(scroll().top);
    42     }
    43 </script>
  • 相关阅读:
    初尝2D骨骼动画编辑工具SPINE,并into Unity3D
    Unity3D优化总结(一)
    ARPG游戏打击感相关的技术简单总结
    总结一下一般游戏中3D模型各种勾边方法遇到的工程性问题
    多次被坑了后,重温设计模式原则
    unity shader序列帧动画代码,顺便吐槽一下unity shader系统
    暗黑三泛光算法研究
    《全民无双》锁链刀光程序生成算法,即U3D——刀光轨迹插件的改进
    Low-level Thinking in High-level Shading Languages
    python实现智能语音天气预报
  • 原文地址:https://www.cnblogs.com/joyco773/p/6048734.html
Copyright © 2011-2022 走看看