zoukankan      html  css  js  c++  java
  • 浏览器 窗口 scrollTop 的兼容性问题

    window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性。

    window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性

    在(quirk 模式)的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
    在(quirk 模式)的时候 document.documentElement.scrollTop 永远是零

    非quirk模式的时候 document.documentElement.scrollTop Internet Explorer, Firefox and Opera 返回正确的值 但是在 Google Chrome ,Safari 中永远是零

    特整理一个表格如下

    非quirk模式 IE6 7 8 IE9 firefox opera chrome safari
    scrollY undefined undefined 正确 正确 正确 正确
    pageYOffset undefined 正确 正确 正确 正确 正确
    body.scrollTop 0 0 0 0 正确 正确
    documentElement.scrollTop 正确 正确 正确 正确 0 0
                 
    quirk 模式 IE6 7 8 IE9 firefox opera chrome safari
    scrollY undefined undefined 正确 正确 正确 正确
    pageYOffset undefined 正确 正确 正确 正确 正确
    body.scrollTop 正确 正确 正确 正确 正确 正确
    documentElement.scrollTop 0 正确 0 0 0 0

    以上在win7环境下测试

    可以看出是非常凌乱的

    只在quirk模式下, body.scrollTop是被所有都支持的

    所以这个表大家也不用 也没有必要去记, 只要记住一条

    if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678

    }else if(document.documentElement.scrollTop ){//IE678 的非quirk模式

    }else if(document.body.scrolltop){//IE678 的quirk模式

    }

    原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop

    当然 也可以直接scrollTop 而不使用pageYOffset

    以下是MDN 提供的兼容性代码

    scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop

  • 相关阅读:
    Infopath Notify 弹出提示信息
    window.showModalDialog 返回值
    【转】获得正文内容中的所有img标签的图片路径
    Json Datable Convert
    Sharepoint 列表 附件 小功能
    Surgey 权限更改
    SQL 触发器用于IP记录转换
    Caml语句 查询分配给当前用户及当前组
    jquery 1.3.2 auto referenced when new web application in VSTS2010(DEV10)
    TFS diff/merge configuration
  • 原文地址:https://www.cnblogs.com/alexandra/p/3613178.html
Copyright © 2011-2022 走看看