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为一个命名锚点的名字后浏览器产生的行为类似。