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 对应 ...
随机推荐
- ios 时间和毫秒数转换
01-时间和毫秒数的相互转换 //获取毫秒数的时间戳 long inter = [[NSDate date] timeIntervalSince1970]*1000; NSLog(@"%ld ...
- LoadRunner 场景运行error的几种情况
一. Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set th ...
- 【转】HBase原理和设计
简介 HBase —— Hadoop Database的简称,Google BigTable的另一种开源实现方式,从问世之初,就为了解决用大量廉价的机器高速存取海量数据.实现数据分布式存储提供可靠的方 ...
- [转载]explicit关键字
本文转自http://www.programlife.net/cpp-explicit-keyword.html. 其实explicit主要用于防止隐式转换,用于修饰构造函数.复制构造函数[注意:一般 ...
- windows修改虚拟内存
右键电脑属性: 高级系统设置: 性能设置: 虚拟内存更改:
- JavaScript入门(2)
encodeURI()和 decodeURI()作用 编码与解码 encodeURIComponent()和 decodeURIComponent()作用区别是 后者可以处理一些特殊字符进行转义 ...
- java的重载、覆盖和隐藏的区别
重载:方法名相同,但参数不同的多个同名函数 注意:1.参数不同的意思是参数类型.参数个数.参数顺序至少有一个不同 2.返回值和异常以及访问修饰符,不能作为重载的条件(因为对于匿名调用,会出现歧义,eg ...
- jQuery-事件以及动画
事件: 1.//方法1 $(window).load(function(){ }) window.onload=function(){ } //方法2 function one(){ alert(&q ...
- js从字符串中提取身份证号,连续18位数字
<!DOCTYPE html> <html> <head> <title>提取身份证号</title> <meta charset=& ...
- java发送短信--httpclient方式
最近头让我写个发送短信的java程序检测BI系统,检查数据库是否有异常发送,有则发送短信到头的手机里.这里我直说httpclient方式的get请求方式,并且已经有方式的短信的接口了,所以只要再加上参 ...