浏览器 窗口 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 ...
随机推荐
- poj1552---枚举
#include <stdio.h> #include <stdlib.h> int main() { ],th=,i,j; while(scanf("%d" ...
- [LeetCode][Python]ZigZag Conversion
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/zigzag- ...
- [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设(七)
目标: 1. 完成最终的设备驱动,增加具体的watchdog设备操作的代码. 测试代码: 代码最终实现见cwd_demo.c 代码只实现了read与write. 没有实现ioctl. 因此,我们可以 ...
- 截取字符串一之substring
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BZOJ 1297: [SCOI2009]迷路( dp + 矩阵快速幂 )
递推式很明显...但是要做矩阵乘法就得拆点..我一开始很脑残地对于每一条权值v>1的边都新建v-1个节点去转移...然后就TLE了...把每个点拆成9个就可以了...时间复杂度O((9N)^3* ...
- Cocos2dx游戏开发系列笔记13:一个横版拳击游戏Demo完结篇
懒骨头(http://blog.csdn.net/iamlazybone QQ:124774397 ) 写下这些东西的同时 旁边放了两部电影 周星驰的<还魂夜> 甄子丹的<特殊身份& ...
- Web存储(Web Storage)介绍
Web存储即在客户端存储数据. 在没有Web Storage之前,是通过cookie来在客户端存储数据的.但是由于 浏览器能存cookie数比较少.如IE8,Firefox,opera每个域可以保存的 ...
- ETL工具之ODI
ETL工具之ODI 到目前为止,Oracle的ETL工具包括两种,分别是Oracle Warehouse Builder(OWB)和Oracle Data Integrator(ODI ...
- Less基础教程
Less基础教程 less是较早出现的css预处理器. LESS API 参考 安装和使用 安装比较简单,通过nmp或bower安装即可. npm install less -g bower inst ...
- nat123外网SSH访问内网LINUX的N种方法
一,动态公网IP环境 1,环境描述: 路由器分配的是动态公网IP,且有路由管理权限,LINUX主机部署在路由内网.如何实现外网SSH访问内网LINUX主机? 2,解决方案: 使用nat123动态域名解 ...