javascript获取文档坐标和视口坐标

246 阅读 0 评论 163 点赞

我是靠谱客的博主大胆中心，最近开发中收集的这篇文章主要介绍javascript获取文档坐标和视口坐标，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

元素的位置是以像素度量的，向右代表X坐标的增加，向下代表Y坐标的增加，但是，有两个不同的点作为坐标系的原点：元素的X和Y坐标可以相对于文档的左上角或者相对于在职中显示文档的视口的左上角。

在定级窗口和标签页中，”视口“只是实际显示文档内容的浏览器的一部分：它不包括浏览器的“外壳”（如菜单、工具条和标签页）。

针对框架也中显示的文档，是口试定了框架页的<iframe>元素。无论在何种情况下，当讨论元素的位置是，必须弄清楚所使用的坐标是文档坐标还是视口坐标。（注意，视口坐标有事也叫作窗口坐标）

如果文档比视口要小，或者说还未出现滚动，则文档的左上角就是视口的左上角，文档和视口坐标系统是同一个。但是一般来说，要在两种坐标系之间互相转换，必须加上或减去滚动的偏移量（scroll offset）。例如，在文档坐标中如果一个元素的Y坐标是200像素，并且用户已经把浏览器向下滚动了75像素，那么视口坐标中元素的Y坐标就是125像素。同样，在视口坐标中如果一个元素的X坐标是400像素，并且用户已经水平滚动了视口200像素，那么文档坐标中像素的X坐标中元素的X坐标就是600像素。

文档坐标比视口坐标更加基础，并且在用户滚动是他们不会发生变化。不过，在客户端编程中使用视口坐标是非常常见的。当使用CSS指定元素的位置时运用了文档坐标。但是最简单的查询元素位置的方法：getBoundingClientRect()返回视口坐标中的位置。类似的，当为鼠标事件注册事件处理程序函数时，报告的鼠标指针的坐标是在视口坐标系中。

为了在坐标系中转换，我们需要判定浏览器窗口的滚动条的位置。Window对象的pageXoffset和pageYOffset属性在所有的浏览器中提供这些值，除了IE8及更早的版本以外。IE（和所有现代浏览器）也可以通过scrollLeft和scrollTop属性来获得滚动条的位置。令人迷惑的是，正常的情况下通过查找文档的根节点（document.documentElement）来获取这些属性，但是在怪异模式下，必须在文档的<body>元素（documeng.body）上查询它们。以下显示了如何简便的查询滚动条的位置。

functon getScrollOffsets(w){
  w = w || window;
  var sLeft,sTop;
  if(w.pageXOffset != null) {
    sLeft = w.pageXOffset;
    sTop = w.pageYOffset;
    return {x:sLeft,y:sTop};
  }
  if(document.compatMode == "CSS1Compat"){
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;  
    return {x:sLeft,y:sTop};
  }else if(document.compatMode == "BackCompat"){
    sLeft = document.body.scrollLeft; 
    sTop = document.body.scrollTop;
    return {x:sLeft,y:sTop};  
  }
}

有时候能够判定视口的尺寸也是非常有用的，例如，为了确定文档的案部分是当前可见的。利用滚动偏移量查询视口的尺寸的简单方法在IE8及更早版本中无法工作，而且该技术在IE中的运行法师还要取决于浏览器是否处于怪异模式还是标准模式。

window下的属性：

innerHeight:包括滚动条在内的窗口内容部分的高度

innerWidth:包括滚动条在内的窗口内容部分的宽度

outerHeight:整个浏览器的高度，包括界面所有组成部分。

outerWidth:整个浏览器的宽度，包括界面所有组成部分。

pageXOffset:浏览器窗口的滚动条X轴的位置

pageYOffset:浏览器窗口的滚动条Y轴的位置

scrollX:浏览器窗口的滚动条X轴的位置

scrollY:浏览器窗口的滚动条Y轴的位置

属性

document.documentElement document.body
clientHeight 视口内可见内容的大小，不包括滚动的部分和滚动条。
clientWidth
clientLeft　　
clientTop
offsetHeight 内容大小，并且包括滚动条。
offsetWidth
offsetLeft
offsetTop
scrollHeight 滚动内容的大小，包括滚动的部分,但不包括滚动条。
scrollWidth
scrollTop
scrollWidth

查询窗口的视口尺寸：

function getViewportSize(w){
　　w = w || window;
　　var cWidth,cHeight;
　　if(w.innerWidth != null){
　　　　cWidth = w.innerWidht;
　　　　cHeight = w.innerHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
　　if(document.compatMode == "CSS1Compat"){
　　　　cWidth = document.documentElement.clientWidth;
　　　　cHeight = doument.documentElement.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}else if(document.compatMode == "BackCompat"){
　　　　cWidth = document.body.clientWidth;
　　　　cHeight = doument.body.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
}

以上所述就是本文的全部内容了，希望大家能够喜欢。