元素的位置是以像素来度量的，有两个不同的点作为坐标系的原点：
文档的左上角
在其中显示文档的视口的左上角
在顶级窗口和标签页中，视口只是实际显示文档内容的浏览器的一部分：他不包括浏览器的“外壳”（如菜单、工具栏和标签页）。针对框架页中显示的文档，视口是定义了框架页的<iframe>元素。
无论在何种情况下，当讨论元素的位置时，必须弄清楚所使用的坐标是文档坐标还是视口坐标（或者是窗口坐标）。
查询窗口的滚动条位置
先使用比较新的属性scrollingElement：scrollingElement （ Document 的只读属性）返回滚动文档的 Element 对象的引用。 在标准模式下, 这是文档的根元素, document.documentElement。当在怪异模式下， scrollingElement 属性返回 HTML body 元素（若不存在返回 null ）。
// 查询窗口的滚动条位置
function getScroll(w){
w = w || window;
var d = w.document;
var scrollingElement = d.scrollingElement;
return {
x: scrollingElement.scrollLeft,
y: scrollingElement.scrollTop
}
}
或者是window对象的pageXOffset和pageYOffset属性（IE8及以下不兼容）：
// 查询窗口的滚动条位置
function getScroll(w){
w = w || window;
return {
x: w.pageXOffset,
y: w.pageYOffset
};
}
1
2
3
4
5
6
7
8
但是我们有时也要考虑浏览器的兼容性：
// 查询窗口的滚动条位置
function getScrollOffsets(w){
w = w || window;
// 除了IE8及以下版本，其他浏览器使用
if(w.pageXOffset != null){
return {
x: w.pageXOffset,
y: w.pageYOffset
};
}
// 对标准模式下的IE（或任何浏览器）
var d = w.document;
if(document.compatMode == "CSS1Compat"){
return {
x: d.documentElement.scrollLeft,
y: d.documentElement.scrollTop
};
}
// 怪异模式下的浏览器
return {
x: d.body.scrollLeft,
y: d.body.scrollTop
};
}
查询窗口的视口尺寸
// 查询窗口的视口尺寸
function getViewportSize(w){
w = w || window;
// 除了IE8及以下版本，其他浏览器使用
if(w.innerWidth != null){
return {
w: w.innerWidth,
h: w.innerHeight
};
}
// 对标准模式下的IE（或任何浏览器）
var d = w.document;
if(document.compatMode == "CSS1Compat"){
return {
w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight
};
}
// 怪异模式下的浏览器
return {
w: d.body.clientWidth,
h: d.body.clientHeight
};
}
不过innerWidth/innerHeight和clientWidth/clientHeight的返回结果是不同的，先看一张图
从图中可以看出两者的差距就在于当有滚动条的时候，innerWidth/innerHeight包括滚动条的宽度，而clientWidth/clientHeight不包括滚动条的宽度。
