document.body.scrollTop or document.documentElement.scrollTop
用Javascript获取DOM节点相对于页面的绝对坐标时，需要计算当前页面的滚动距离，而这个值的获取又取决于浏览器。
在Firefox或Chrome浏览器的控制台可以查看document.body 对应于页面中 <body></body>部分的元素，而document.documentElement则相当于整个HTML，说明浏览器在解释渲染后的页面位置范围是存在不同的，FF、Opera和IE浏览器认为在客户端浏览器展示的页面的内容对应于整个HTML，所以使用document.documentElement来代表，相应的滚动距离则通过document.documentElement.scrollLeft 和 document.documentElement.scrollTop来获取，而Safari和Chrome浏览器则认为页面开始于body部分，从而相应的滚动距离用document.body.scrollLeft 和 document.body.scrollTop来获取。另外需要注意的是，FF和IE的quirks mode（兼容模式）下是用document.body来获取的。
针对跨浏览器的解决方案则可简单的用如下代码获取：
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
document.body.scrollTop or document.documentElement.scrollTop的更多相关文章
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.documentElement.scrollTop || document.body.scrollTop
如果有doctype的声明,需要用document.documentElement.scrollTop没有doctype的声明,用document.body.scrollTop
- document.body.scrollTop vs document.documentElement.scrollTop
window.addEventListener("scroll", function () { if (document.body.scrollTop >= window.i ...
- document.body.scrollTop vs document.documentElement.scrollTop && document.body.scrollHeight vs document.documentElement.scrollHeight
FireFox下 document.body.scrollHeight || document.documentElement.scrollHeight;//等价 document.body.scro ...
- document.body.scrollTop与document.documentElement.scrollTop兼容
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...
- js中的document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.b ...
- 关于document.body.scrollTop与documentElement.scrollTop
遇到document.body.scrollTop值为0的问题 今天在写一个小demo的时候,使用滚动条,我用document.body.scrollTop获取滚动条的位置,但是很奇怪的发现在谷歌上获 ...
- document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...
- document.documentElement.scrollTop(获取滚动条位置)
要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;而不是:document.body.scrollTop;documentElement 对应 ...
随机推荐
- hashlib加密操作模块
import hashlib#加密操作obj=hashlib.md5(bytes("hasdfghjklcxz",encoding="utf-8"))#加密操作 ...
- hdu1078 dp(递推)+搜索
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1078 题意:老鼠从(1.1)点出发,每次最多只能走K步,而且下一步走的位置的值必须必当前值 ...
- js-高级技术
高级技术: 1.function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new ...
- Flume内存溢出错误
java.lang.OutOfMemoryError: Java heap space at java.util.Arrays.copyOf(Arrays.java:) at java.lang.Ab ...
- set+几何 LA 5908 Tracking RFIDs
题目传送门 题意:给一些传感器,范围在r内,再给一些询问点,问这些点能有几个传感器收到,当有墙隔绝时信号减弱,范围变小 分析:set存储传感器,用set的find来查找是否是传感器.因为询问点少,可以 ...
- iOS学习11之OC继承
面向对象的三大特性:封装,继承,多态. 1.继承 继承既能保证类的完整,又能简化代码. 把公共的⽅法和实例变量写在⽗类⾥,⼦类只需要写⾃⼰独有的实例变量和⽅法即可. 继承是⾯向对象三⼤特性之⼀,合理的 ...
- Hive0.11安装配置学习笔记
转:http://springsfeng.iteye.com/blog/1734517 1 . 首先请安装好MySQL并修改root账户密码,使用root账户执行下面命令: su - root ...
- ACM Arithmetic Expression
Description Given N arithmetic expressions, can you tell whose result is closest to 9? Input Line 1: ...
- [Java] java.util.Arrays 中使用的 sort 采用的算法 (转)
http://book.douban.com/annotation/15154366/Q: java.util.Arrays 中使用的 sort 采用的是什么算法? A: java中Arrays. ...
- BZOJ 1087 题解【状压DP】
1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3112 Solved: 1816[Submit][ ...