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 对应 ...
随机推荐
- CentOS7安装PHP简易步骤
安装前准备 yum update yum install -y vim yum install -y wget yum install -y bzip2 yum install -y gcc gcc+ ...
- 如何把Eclipse工程导入到Android Studio
1 在Eclipse中新建android项目androiddemo.里面只有一个MainActivity,主要是使用fastjson将一个Person对象转化成字符串. 2 在项目上点击右键-&g ...
- 理解flex_对齐
容器属性: 左右对齐方式:justify-content:flex-start/flex-end/center/space-between/space-around; 上下对齐方式:align-ite ...
- document.body.scrollTop
标准浏览器:document.documentElement.scrollTop; 谷歌浏览器:document.body.scrollTop; var scrollTop = document.do ...
- cve-2015-1635漏洞分析
上周(2015.4.15)爆出的cve-2015-1635漏洞,遂分析一番,留作记录.使用poc如下. wget 192.168.16.168/welcome.png --debug --header ...
- JavaScript内置对象(字符串,数组,日期的处理)
Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...
- 移动端网页 -- 安卓与IOS兼容
1.在a链接长按时,ios系统会识别并复制a链接中的href值,而安卓不会,只会选择复制文字 关于长按复制其他区域内容:pc端可以实现,在移动端目前还没有找到解决方案,很多都是基于flash的 2.i ...
- sql中保留到小数点后两位以及非空判断赋值为零
SELECT a.dzzmc, a.dzzdm, a.px, CONVERT(decimal(18, 2), ISNULL(b.sjpfzdf, 0) * 0.6 + (ISNULL(a.zddfzd ...
- three.js入门2
新建一个html文件 <!DOCTYPE html> <html> <head> <title></title> <style> ...
- COGS1752 [BOI2007]摩基亚Mokia（CDQ分治 + 二维前缀和 + 线段树）
题目这么说的: 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它 ...