浏览器 窗口 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 ...
随机推荐
- Openstack 的 RPC使用。
大家都已经很熟悉了RPC了. 比如说nfs就是采用的RPC通信. 尤其SUN RPC 已经成为了C语言开发的经典一种进程间调用机制. openstack 的RPC 机制, 是基于AMQP 活着其他高级 ...
- Cpp again
1,
- RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍
RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户 ...
- 得到client真IP住址
1.引进的必要性log4j-1.2.14.jar package org.ydd.test; import java.util.Enumeration; import javax.servlet.ht ...
- 关于c语言中负数位移位操作的漫谈
近期有个朋友在程序中使用了对16进制数做负数移位(编译器是gcc),本人最次产生好奇.所以研究了一些. 对一个数做负数位移位的操作是不规范的,可是是可行的. 详细样例: char tmp = 0x10 ...
- asp.net DropDownList实现ToolTip功能
在绑定DropDownList控件时,可能出现绑定显示的文本过长以至于超过控件长度的内容看不到,这时候就需要使用ToolTip完成其功能,即鼠标放到相应选项后就可显示其完成内容. 首先,在页面引入jQ ...
- SET QUOTED_IDENTIFIER (Transact-SQL)
使 SQL Server 遵从关于引号分隔标识符和文字字符串的 ISO 规则. 由双引号分隔的标识符可以是 Transact-SQL 保留关键字,也可以包含 Transact-SQL 标识符语法约定通 ...
- apache-tomcat-7 设置最大上传.war文件大小[zhuan]
在利用tomcat自带的主机管理页面进行WAR包部署的时候,提示文件太大,无法上传. 解决方案: 找到 /usr/local/apache-tomcat7/webapps/manager/WEB- ...
- Visual Studio之Nuget(服务器)
一.创建空Web项目 二.安装Nuget.Server 这个时候,安装完成后,发现项目文件里多了Default.aspx等文件,因为我选择的MVC,所以最好做下小小的调整 ——在Global.asax ...
- 创建以及加载模块【nodejs第四篇】
建立两个文件,文件一createModule.js ,文件二main.js createModule.js的代码,主要用于创建一个模块 /** * Created by Administrator o ...