用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的更多相关文章

  1. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  2. document.documentElement.scrollTop || document.body.scrollTop

    如果有doctype的声明,需要用document.documentElement.scrollTop没有doctype的声明,用document.body.scrollTop

  3. document.body.scrollTop vs document.documentElement.scrollTop

    window.addEventListener("scroll", function () { if (document.body.scrollTop >= window.i ...

  4. document.body.scrollTop vs document.documentElement.scrollTop && document.body.scrollHeight vs document.documentElement.scrollHeight

    FireFox下 document.body.scrollHeight || document.documentElement.scrollHeight;//等价 document.body.scro ...

  5. document.body.scrollTop与document.documentElement.scrollTop兼容

    这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...

  6. js中的document.body.scrollTop与document.documentElement.scrollTop

    获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.b ...

  7. 关于document.body.scrollTop与documentElement.scrollTop

    遇到document.body.scrollTop值为0的问题 今天在写一个小demo的时候,使用滚动条,我用document.body.scrollTop获取滚动条的位置,但是很奇怪的发现在谷歌上获 ...

  8. document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...

  9. document.documentElement.scrollTop(获取滚动条位置)

    要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;而不是:document.body.scrollTop;documentElement 对应 ...

随机推荐

  1. Hadoop Mapreduce分区、分组、二次排序过程详解[转]

    原文地址:Hadoop Mapreduce分区.分组.二次排序过程详解[转]作者: 徐海蛟 教学用途 1.MapReduce中数据流动   (1)最简单的过程:  map - reduce   (2) ...

  2. 【转】Kylin的cube模型

    转自:http://www.cnblogs.com/en-heng/p/5239311.html 1. 数据仓库的相关概念 OLAP 大部分数据库系统的主要任务是执行联机事务处理和查询处理,这种处理被 ...

  3. java中HashMap详解

    HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 HashMap 是 Map 接口的常用实现类,HashSet 是 Set 接口的常用实 ...

  4. hdu2859 dp

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2859 题意:输入一个数n,接下来是一个由n*n个字母组成的矩阵,求以左下到右上的线为轴的最 ...

  5. Python与Hack之Unix口令

    1.在实验时候,先导入crypt库:必须在Unix环境下才能实现这个模块 2.代码贴一下,以后有了Unix环境试试吧: import cryptimport syssys.modules['Crypt ...

  6. 《DSP using MATLAB》示例Example4.11

    代码: b = [1, 0]; a = [1, -0.9]; % %% ---------------------------------------------- %% START a determ ...

  7. 如何用distinct消除重复记录的同时又能选取多个字段值?

    http://www.cnblogs.com/warioland/archive/2012/05/30/2526128.html

  8. Tomcat 配置 Context

    在 conf/Catalina/localhost/ 下添加 xml配置文件,文件名和站点名一致. 配置文件示例 <?xml version='1.0' encoding='utf-8'?> ...

  9. MFC 定义和调用全局变量的一种方法

    在CTestApp.h中声明一个int x;然后调用的方式如下: CTestApp *app = (CTestApp *)AfxGetApp(); //生成指向应用程序类的指针,Test处改为对应的项 ...

  10. 书摘及理解:Servlet与JSP的关系

    “Servlet是服务器端程序,它把应用逻辑嵌入到HTTP请求,在应答过程中可以直接通过PrinteWriter 输出经过逻辑处理后的动态HTML.JSP则是一种特殊的Servlet,它将Java代码 ...