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. linux安装php遇到的问题

    第一个问题:configure: error: libjpeg.(a|so) not found 很多人都纳闷儿了,我都安装了的,为什么就找不到呢?找不到其实就应试想到它的搜索位置里面是没有的,要不然 ...

  2. python SyntaxError: Non-ASCII character '\xd5' in file

    我使用的是python2.7, 在pycharm想运行程序,但是却报出了SyntaxError: Non-ASCII character '\xd5' in file 原因是因为源码中包含了中文注释, ...

  3. Labeling Balls(拓扑排序wa)

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12466   Accepted: 3576 D ...

  4. New Relic——手机应用app开发达人的福利立即就到啦!

    HiWork集成的第三方服务(机器人)将有新的添加啦,添加了BitBucket和New Relic.分别做下介绍啦! 1.BitBucket BitBucket 是一家源码托管站点.採用Mercuri ...

  5. objective-c 关键字和概念

    @ 看到这个关键字,我们就应该想到,这是Object-C对C语言的扩展,例如@interface XXX. @interface 声明类 @implementation 实现类 @protocol 声 ...

  6. MySQL学习笔记(5)

    子查询Subquery 出现在其他sql语句内的select子句. 子查询的外层查询可以是:SELECT,INSERT,UPDATE,SET或DO. 子查询可以返回标量,一行,一列或子查询. ①使用比 ...

  7. Android App开发常用专题开源代码

    Android App开发中用到过的专题类开源代码: 项目的需求多了,不知不觉成了Github摘抄员,感谢分享精神,节省了很多弯路和时间.不过想要实现指定效果,还是要看懂作者的思路才好下手改造. 主题 ...

  8. activity的打开关闭动画

    Activity的打开关闭或者说相互跳转之间可以设置动画的.默认的打开关闭直接消失或出现,比较不优美,但是有的手机Rom对这个默认做了修改,比如红米HM1,默认的就是新页面自右向左滑动出现,自左向右滑 ...

  9. .NET软件开发与常用工具清单

    [工欲善其事,必先利其器]软件开发的第一步就是选择高效.智能的工具. 下面列出的工具软件能辅助提高工作效率.  开发类工具 微软.Net平台下的集成开发环境:Visual Studio. Visual ...

  10. ASP.NET MVC Controller向View传值方式总结

    Controller向View传值方式总结 总结发现ASP.NET MVC中Controller向View传值的方式共有6种,分别是: ViewBag ViewData TempData 向普通Vie ...