您的位置：首页 > 运维架构

有关窗口的scrollTop及scrollLeft属性

2010-04-08 17:59 337 查看

xhtml不支持document.body.scrollTop
当为html文档加上如下头以支持xhtml过渡标准时候，使用document.body.scrollTop值始终为0

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
这是document.body.scrollTop始终为0,这时需要用document.documentElement.scrollTop才能获得正确的值，而如果不加xhtml的申明,必须用document.body.scrollTop获得其值，此时document.documentElement.scrollTop将为0
下面这个getScrollXY()方法可以包装这个变化

<script type=”text/javascript” >
     function getScrollXY()
{
          var x,y;
          if(document.body.scrollTop)
{

                x=document.body.scrollLeft;

                y=document.body.scrollTop;
           }
          else
{

                x=document.documentElement.scrollLeft;

                y=document.documentElement.scrollTop;
           }
          return {x:x,y:y};
     }
    function onClick()
{

document.getElementById(“disp1“).value=getScrollXY().x;

document.getElementById(“disp2“).value=getScrollXY().y;
}

</script>
以上这是兼容的写法，没有考虑是否写了XHTML声明。如果要知道此文档是否写了XHTML声明需要用到document.compatMode，我们都知道，IE对盒模型的渲染在
Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks
Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks
Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。 document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

当文档有了标准声明时，document.compatMode
的值就等于 "CSS1compat"，否则就是BackCompat,
因此，我们可以根据 document.compatMode
的值来判断文档是否加了标准声明

///检测当前文档是否写了XHTML声明
function IeTrueBody()
{

if (document.compatMode && document.compatMode != "BackCompat")

return document.documentElement;

else

return document.body;
}
///再返回滚动条的位置信息；
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
在IE和FireFox下scrollTop都可以用，但在IE下不能用pageYOffset，此属性在FireFox下有效，也就是说如果在FireFox下获得滚动条垂直位置，用scrollTop和pageYOffset均可以.所以为了兼容IE和FireFox最好都用scrollTop。
不仅仅scrollTop是这样，其他还有一些属性也是这样用的
document.documentElement.clientHeight : document.body.clientHeight;
如果没有声明XHML头的话document. documentElement.clientHeight在IE中是0，但在FireFox中也是一个数值，但不准，为了能最大程序的兼容，都要判断一下为好。
其他有关窗口的属性
window.screenLeft和window.screenTop是IE中判断视口位置，在其他浏览器中是undefined，document.body.offsetWidth和document.body.offsetHeight是IE中获取视口大小的属性，在FireFox中会出现奇怪的值，并且此值不随窗口的大小而变动，此值在IE中包括状态栏的高度，document.body.clientHeight和document.body.clientWidth也显示视口的大小，但不包括状态栏的高度和滚动条的宽度,更重要的是此属性在FireFox中同样有效。
在非IE浏览器中，window.screenX和window.screenY表示视口位置，window.innerWidth和window.innerHeight表示视口大小。Window.outerWidth和window.outerHeight表示整个浏览器的大小，奇怪的是此值有可能比屏幕的宽度还要大。这些值在IE中均是undefined。
综上所述：我们可知：
IE专用属性：
window.screenLeft和window.screenTop
判断视口位置
document.body.offsetWidth和document.body.offsetHeight
获取视口大小
其他浏览器
window.screenX和window.screenY获取视口位置<可能为负>
window.innerWidth和window.innerHeight获取视口大小
Window.outerWidth和window.outerHeight获取整个浏览器的大小,包括状态栏和上面的菜单等杂七杂八的东西的高度。
共有的属性：
document.body.clientHeight和document.body.clientWidth显示视口的大小，但不包括状态栏的高度和滚动条的宽度.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： xhtml standards firefox 浏览器 ie 文档

相关文章推荐

新的分享

章节导航