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 的兼容性问题的更多相关文章

  1. javascript中求浏览器窗口可视区域兼容性写法

    1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:•  window.innerHeight - 浏览器窗口的内部高度•  window. ...

  2. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  3. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  4. JavaScript--DOM浏览器窗口可视区域大小

    浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.inn ...

  5. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  6. 用css实现一个空心圆,并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;   ...

  7. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  8. Javascript学习7 - 脚本化浏览器窗口

    原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

  9. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

随机推荐

  1. [笔记]线性回归&梯度下降

    一.总述 线性回归算法属于监督学习的一种,主要用于模型为连续函数的数值预测. 过程总得来说就是初步建模后,通过训练集合确定模型参数,得到最终预测函数,此时输入自变量即可得到预测值. 二.基本过程 1. ...

  2. Android自定义Activity酷炫的动画跳转效果

    两个Activity跳转的时候,自定义翻页效果: Intent intent = new Intent(FirstActivity.this, SecondActivity.class);   sta ...

  3. SQL学习之Insert的特殊用法(插入检索出的数据,表之间的数据复制)

    1.插入检索出的数据 select * from dbo.Customers_1

  4. JavaSE思维导图(二)

  5. iOS keyChain(钥匙串)的简单使用

    通常在开发中我们需要长久的保存某些值比如用户的账号密码等,对于隐私度很高的数据来说保证数据的安全性是尤为重要的.ios中的keyChain是一种很好的选择. 首先去开发者网站(https://deve ...

  6. class A<T> where T:class 这个泛型类中的Where T:class什么意思

    这是类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct                               T必须是一个结构类型 where T : cla ...

  7. iphone/ipad前端开发技巧

    iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现 ...

  8. LeetCode 1. twoSums

    C++: vector<int> twoSum(vector<int>& nums, int target) { unordered_map<int, int&g ...

  9. 根据不同需求跳转不同Activity的另外一种写法

    代码如下: /* Android Asynchronous Http Client Sample Copyright (c) 2014 Marek Sebera <marek.sebera@gm ...

  10. php中的require-once

    require_once语句和require语句完全相同,唯一区别是 PHP 会检查该文件是否已经被包含过,如果是则不会再次包含. 参见include_once的文档来理解_once的含义,并理解与没 ...