浏览器 窗口 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 ...
随机推荐
- 关于iOS7越狱的整理
目前越狱非常的不稳定,已经白苹果第三次了.中途遇见了不少问题,去各大论坛找了下解决办法,算是搬运工. iOS7越狱过程中打开手机上的“evasi0n7”闪退,怎么办?1. 请先尝试卸载手机“evasi ...
- poj2017简单题
#include <stdio.h> #include <stdlib.h> int main() { int n,i; while(scanf("%d", ...
- Redis数据结构及相应的命令
Redis可以存储键(key)与5种不同类型值(value)之间的映射,5中不同类型的值分别为字符串(string),列表(list),散列(hash),集合(set)和有序集合(sorted set ...
- CentOS配置ftp服务器
1.首先更新yum 源 yum update 2. 安装vsftpd yum install vsftpd -y // 安装 移除是 yum remove vsftpd 3. 配置Vsftp ...
- Httpservlet cannot be resolved to a type
这个问题与上个问题可以说是“错的类似”.解决方案:就是在Tomcat的lib目录下加入servlet-api.jar 即可.
- CocoaPods 出现 OTHER_LDFLAGS 错误的解决方法
CocoaPods 出现 OTHER_LDFLAGS 错误的解决方法 在一些项目中运行 pod install 后经常会出现如下错误 [!] The target `项目名 [Debug]` over ...
- zoj3229
题目大意: 一个XX用n天要给m个女神拍写真.这n天里每个女神i分别至少要拍Gi张照片,XX在第j天会给指定Cj个女神最多拍Dj张照片,每个女神第j天拍照数在lj到hj张照片.问XX是否安排完成他的任 ...
- Mysql 批量杀死进程
正常情况下kill id,即可,但是有时候某一异常连接特别多的时候如此操作会让人抓狂,下面记录下小方法: use information_schema; select concat('kill ',i ...
- 电脑硬件扫盲--CPU 显卡
CPU: 主要2个厂商 Inter:core(酷睿) > pentinum(奔腾) > celeron(赛扬) AMD:athlon(速龙) > semporn(闪龙) 主频(GHz ...
- java——%
%; //结果为1 %; //结果为-1 ; //结果为1.2000000000000002