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

  • 相关阅读:
    驱动函数write-linux系统调用如何实现?
    ubus应用-第三篇blob数据
    ubus应用-第二篇ubus代码应用
    uci基本应用法
    request 请求大数精度丢失问题
    List.remove()踩坑记录
    The app delegate must implement the window property
    关于版本号
    iOS 中拨打电话
    使用python 快速搭建一个静态服务器
  • 原文地址:https://www.cnblogs.com/alexandra/p/3613178.html
Copyright © 2011-2022 走看看