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 对应 ...
随机推荐
- View(三)
大家在平时使用View的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给人产生一种点击了按钮的感觉.当然了,这种效果相信几乎所有的 ...
- (转)set集合的用法
原地址:http://blog.csdn.net/chaiwenjun000/article/details/50561775 SET 集合 百度百科中说集合中的元素有三个特征: 1.确定性(集合中的 ...
- css/js(工作中遇到的问题)-2
iOS6 中的 apple-itunes-app tag 例子 //iOS6, safari才有效 <meta name="apple-itunes-app" content ...
- 2.2 代码块--delphi 写日志模块
//2.2 代码块--写日志 //调用例句如:LogMsg('FTP上传线程终止',False,true); procedure LogMsg(AMsg: string; const blnIsErr ...
- 循环遍历泛型集合List绑定到table
<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false&quo ...
- 键盘按钮keyCode大全,keyCode列表对照表
目录 [显示] 1js获取键盘按键对应的keyCode 2字母和数字键的键码值 3数字键盘上的键的键码值和功能键键码值 4控制键键码值 js获取键盘按键对应的keyCode <!doctype ...
- Java NIO示例:多人网络聊天室
一个多客户端聊天室,支持多客户端聊天,有如下功能: 功能1: 客户端通过Java NIO连接到服务端,支持多客户端的连接 功能2:客户端初次连接时,服务端提示输入昵称,如果昵称已经有人使用,提示重新输 ...
- HTML5中lineCap端点样式遇到closePath()
定义和用法 lineCap 属性设置或返回线条末端线帽的样式. 注释:"round" 和 "square" 会使线条略微变长. 默认值: butt JavaSc ...
- Codeforces 682B New Skateboard(DP)
题目大概说给一个数字组成的字符串问有几个子串其代表的数字(可以有前导0)能被4整除. dp[i][m]表示字符串0...i中mod 4为m的后缀的个数 通过在i-1添加str[i]字符转移,或者以st ...
- Codeforces 627A XOR Equation(思路)
题目大概说两个正整数a.b,已知s=a+b以及x=a xor b的值,问有几种a.b这样的数对. 我知道异或相当于无进位的加法,s-x就是其各个位置的进位,比如s-x=1010,那就表示a和b的第1位 ...