【document.body.scrollTop】scrollTop=document.body.scrollTop||document.documentElement.scrollTop及浏览器兼容

本文为此文的衍生:http://blog.csdn.net/virus1992/article/details/8814126


scrollTop=document.body.scrollTop||document.documentElement.scrollTop

等同于:

var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;


===》》前置的总结=========================================》》


总结一下~~


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

这个适用于多数浏览器。。而google立异了。。恰恰相反。

不过,就如上面某兄说的。这两个总是只有一个是管用的。不会出现两个都对的情况。因而下面的方法最有效:

var top = document.documentElement.scrollTop || document.body.scrollTop;

无敌了~!!!!!!!!!!!!哦吼吼~




===》》详细纠结过程=========================================》》

百度scrollTop=document.body.scrollTop||document.documentElement.scrollTop;


在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document.body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document.documentElement来取代document.body,可以这样写
例:
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是个好东西,除了能用在if等条件判断里,还能用在变量赋值上。那么上例等同于下例。
例:
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。
相反,如果不做声明的话,document.documentElement.scrollTop反而会显示为0。


以上转自:http://blog.csdn.net/tfgdd/article/details/5182033




自己尝试了下。。。。(chorme)


document.body.scrollTop可以,而document.documentElement.scrollTop有问题,不知道上面的那位是不是弄错了。。



Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后,则显示正常。
网友提示:由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值,所以都加上也不会有问题(看来上面的问题是Chrome可能把文档当作非标准文档来解析了)。
即获取高度时使用document.documentElement.scrollTop+document.body.scrollTop,经测试,代码在IE、Firefox、Chrome下都能显示正常了。


例:
if (document.documentElement && document.documentElement.scrollTop) {
  msgObj.style.marginTop = -100 + document.documentElement.scrollTop + "px";
 }
 else if (document.body) {
  msgObj.style.marginTop = -100 + document.body.scrollTop + "px";
 }


以上转自:http://blog.zol.com.cn/2472/article_2471917.html


于是。。又是兼容性的问题了(浏览器兼容性真的很烦啊~~有木有~~),继续百度~!


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


在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替    如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。 


 ie5.5之后已经不支持document.body.scrollX对象了。 
 所以在编程的时候,应该这么写:
 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;


以上转自:http://hi.baidu.com/chenhaopihuli/item/29c7821d7af6f2643f87cef6


网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth    (包括边线的宽);
网页可见区域高: document.body.offsetHeight   (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;




scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标


event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签


以上转自:http://blog.sina.com.cn/s/blog_78106bb1010116ub.html


在IE和firefox试了下。都跟chrome相反。。document.body.scrollTop不可以,而document.documentElement.scrollTop才是正解= =。。看来是谷歌特别了。。


总结一下:


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

这个适用于多数浏览器。。而google立异了。。恰恰相反。

不过,就如上面某兄说的。这两个总是只有一个是管用的。不会出现两个都对的情况。因而下面的方法最有效:

var top = document.documentElement.scrollTop || document.body.scrollTop;

无敌了~!!!!!!!!!!!!哦吼吼~

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth    (包括边线的宽);
网页可见区域高: document.body.offsetHeight   (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;




scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标


event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值