浏览器 窗口 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
浏览器 窗口 scrollTop 的兼容性问题的更多相关文章
- javascript中求浏览器窗口可视区域兼容性写法
1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:• window.innerHeight - 浏览器窗口的内部高度• window. ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- JavaScript--DOM浏览器窗口可视区域大小
浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.inn ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- 用css实现一个空心圆,并始终放置在浏览器窗口左下角
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
随机推荐
- 清风注解-Swift程序设计语言
前言 Apple 发布了全新的 Swift 程序设计语言,用来开发 iOS 和 OS X 平台的应用程序.其目的不言而喻:就是为了给老迈的 Objective-C 一个合适接班人!因此,不难预见,未来 ...
- 通过crash了解linux页表
目的: 通过一个c语言实例,了解linux页表的组织结果和mmu的工作原理. 通过页表找到一个物理地址, 对比物理地址与虚拟地址的内容是否一致. 运行环境: $ uname -r3.15.6-200. ...
- C#中经常使用的几种读取XML文件的方法
XML文件是一种经常使用的文件格式,比如WinForm里面的app.config以及Web程序中的web.config文件,还有很多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖 ...
- MySQL学习笔记(5)
子查询Subquery 出现在其他sql语句内的select子句. 子查询的外层查询可以是:SELECT,INSERT,UPDATE,SET或DO. 子查询可以返回标量,一行,一列或子查询. ①使用比 ...
- 如何查看npm配置?
npm config list //查看基本配置 npm config list -l //查看所有配置 npm本地安装与全局安装有什么区别? npm install grunt // 本地安装,则是 ...
- 使用 AngularJS 从零构建大型应用
0.导言 1.准备工作 2.构建框架 3.丰富你的directives 4.公用的services 5.用controllers组织业务 导言 纵览线上各种AngularJS教程,大部分都是基础与一些 ...
- 共享bean
到此为止,对于jsp:useBean创建的对象,我们都将它们看作是_jspService方法中的局部变量来处理(jspService由页面生成的servlet的service方法调用).虽然bean的 ...
- C++ HttpServlet 高并发多线程 HTTP 服务器(转)
from:http://www.oschina.net/code/snippet_568966_43193 C/C++ 程序虽然执行效率高,但程序员在开发 WEB 应用时却因为没有好的 WEB 开 ...
- 多关键字排序(里面有关于操作符(<<运算符 和 >>运算符 )的重载)
一种排序 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...
- 解决jni链接时找不到函数的问题
用jni调用库函数时,经常会碰到link的错误,具体出错信息如下: 08-07 01:42:06.490: E/AndroidRuntime(1665): java.lang.UnsatisfiedL ...