文章目录
  1. 1. 查询窗口的滚动条位置
  2. 2. 查询窗口的视口尺寸

元素的位置是以像素来度量的,有两个不同的点作为坐标系的原点:

  1. 文档的左上角
  2. 在其中显示文档的视口的左上角

在顶级窗口和标签页中,视口只是实际显示文档内容的浏览器的一部分:他不包括浏览器的“外壳”(如菜单、工具栏和标签页)。针对框架页中显示的文档,视口是定义了框架页的<iframe>元素。
无论在何种情况下,当讨论元素的位置时,必须弄清楚所使用的坐标是文档坐标还是视口坐标(或者是窗口坐标)。

查询窗口的滚动条位置

先使用比较新的属性scrollingElement:scrollingElement ( Document 的只读属性)返回滚动文档的 Element 对象的引用。 在标准模式下, 这是文档的根元素, document.documentElement。当在怪异模式下, scrollingElement 属性返回 HTML body 元素(若不存在返回 null )。

1
2
3
4
5
6
7
8
9
10
// 查询窗口的滚动条位置
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及以下不兼容):

1
2
3
4
5
6
7
8
// 查询窗口的滚动条位置
function getScroll(w){
w = w || window;
return {
x: w.pageXOffset,
y: w.pageYOffset
};
}

但是我们有时也要考虑浏览器的兼容性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 查询窗口的滚动条位置
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
};
}

查询窗口的视口尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 查询窗口的视口尺寸
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

从图中可以看出两者的差距就在于当有滚动条的时候,innerWidth/innerHeight包括滚动条的宽度,而clientWidth/clientHeight不包括滚动条的宽度。

文章目录
  1. 1. 查询窗口的滚动条位置
  2. 2. 查询窗口的视口尺寸