浏览器 窗口 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 ...
随机推荐
- Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn
这个异常我在网上查看了很多资料,一般都说是hibernate的session问题,让重新两个方法,但是我以前用的时候没问题啊,所以一直找问题,终于这个bug让我找到了,就是因为我插入操作的时候用的是别 ...
- 截取字符串一之slice
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- OkHttp–支持SPDY协议的高效HTTP库
Android为我们提供了两种HTTP交互的方式: HttpURLConnection 和 Apache HTTP Client,虽然两者都支持HTTPS,流的上传和下载,配置超时,IPv6和连接池, ...
- 单例模式 GetInstance()
如何设计一个含GetInstance()函数的类 直接上代码: 头文件(MyClass.h): class CMyClass { public: CMyClass(void); ~CMyClass(v ...
- HTML5中video的使用一
<!DOCTYPE html> <html> <head> <title>HTML5 </title> <meta http-equi ...
- SlidingMenu的编译及使用
1. 在github上有一个效果不错的开源库,SlidingMenu 最新的代码下载下来后,ExampleListActivity项目会报错: No resource found that ...
- BZOJ 2301: [HAOI2011]Problem b( 数论 )
和POI某道题是一样的... http://www.cnblogs.com/JSZX11556/p/4686674.html 只需要二维差分一下就行了. 时间复杂度O(MAXN + N^1.5) - ...
- find: missing argument to `-exec'
man find 发现 花括号要加 '' find ${LOG_BASE_DIR}$dir/ -type f -mtime +${KEEP_DAYS} -name ${LOG_REG} -exec r ...
- Windows Phone 8.1 发送http 网络请求。
在windows phone 8.1 中可以用 HttpClient 类来发送http 请求. 例子: try { Uri uri = new Uri(@"http://api.map.ba ...
- BASE64URL解析
BASE64URL是一种在BASE64的基础上编码形成新的加密方式,为了编码能在网络中安全顺畅传输,需要对BASE64进行的编码,特别是互联网中. BASE64URL编码的流程: .明文使用BASE6 ...