HTML元素坐标定位，这些知识点得掌握
文档坐标和视口坐标视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px – 75px = 125px。
如何获取浏览器滚动条的位置？Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置。
下面代码的getScrollOffsets方法获取滚动条位置：
01
//以一个对象的x和y属性放回滚动条的位置
02
function getScrollOffsets（w）{
03
w = w || window;
04
//除了IE 8以及更早的版本以外，其他浏览器都支持
05
if（w.pageXOffset != null） return {x: w.pageXOffset, y: w.pageYOffset};
06
//对标准模式下的IE
07
var d = w.document;
08
if（document.compatMode == "CSS1Compat"）
09
return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};
10
//对怪异模式下的浏览器
11
return { x: d.body.scrollLeft, y: d.body.scrollTop};
12
}
有时候能够判定视口的尺寸也是非常有用的，下面的代码简便地查询视口尺寸：
01
//作为一个对象的w和h属性返回视口的尺寸
02
function getViewportSize（w）{
03
//使用指定的窗口， 如果不带参数则使用当前窗口
04
w = w || window;
05
06
//除了IE8及更早的版本以外，其他浏览器都能用
07
if（w.innerWidth != null）
08
return {w: w.innerWidth, h: w.innerHeight};
09
10
//对标准模式下的IE（或任意浏览器）
11
var d = w.document;
12
if（document.compatMode == "CSS1Compat"）
13
return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
14
15
//对怪异模式下的浏览器
16
return {w: d.body.clientWidth, h: d.body.clientHeight};
17
}
上面的两个例子已经使用到scrollLeft、scrollTop、clientWidth、clientHeight。 scrollLeft和scrollTop获取滚动条位置，而clientWidth和clientHeight获取对象的尺寸。
查询元素的几何尺寸
判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect（）方法。该方法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、bottom属性的对象。
这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标，需要加上滚动偏移量：
1
//元素相对于文档的坐标位置
2
function getElementRect（e）{
3
var box = e.getBoundingClientRect（）；
4
var offsets = getScrollOffsets（）；
5
var x = box.left + offsets.x;
6
var y = box.top + offsets.y;
7
8
return {x:x, y: y};
9
}
在很多浏览器中，getBoundingClientRect（）返回的对象还包括width和height属性。但在原始的IE中未实现。可以这样计算元素的width和height：
1
//元素尺寸
2
function getElementSize（e）{
3
var box = getElementRect（e）；
4
var w = box.width || box.right - box.left;
5
var h = box.height || box.bottom - box.top;
6
7
return {w: w, h: h};
8
}
滚动元素
之前的getScrollOffsets方法可以查询滚动条的位置。该例子的scrollLeft和scrollTop属性可以用来设置让浏览器滚动，但有一种更简单的方法从Javascript最早时期开始支持的。Window对象的scrollTop（）方法接口一个点的X和Y坐标（文档坐标），并作为滚动条的偏移量设置它们。下面代码滚动浏览器到文档最下面的页面可见：
1
//滚动到浏览器最底部
2
function scrollToBottom（）{
3
//获取文档和视口的高度
4
var documentHeight = document.documentElement.offsetHeight;
5
var viewportHeight = window.innerHeight; //或使用上面的getViewPortSize（）方法
6
7
//然后，滚动让最后一页在视口中可见
8
window.scrollTo（0, documentHeight - viewportHeight）；
9
}
Window的scrollBy方法和scroll（）和scrollTo（）类似，但是它的参数是相对的，并在当前滚动条的偏移量上增加。例如，快速阅读者可能会喜欢这样：
1
javascript:void setInterval（function（）{scrollBy（0, 10）}, 200）；
如果想让某个元素在文档中可见，可以利用getBoundingClientRect（）计算元素的位置，并转换为文档坐标，然后使用scrollTo（）方法达到目的。但在需要显示Html元素上调用scrollIntoView（）方法更方便。http://www.9ask.cn/langfang/
scrollIntoView（）的行为与设置window.location.hash为一个命名锚点的名字后浏览器产生的行为类似。
页:
[1]