【中培课堂】浅论Html元素坐标定位应该注意的问题

如何获取浏览器滚动条的位置？中培教育《HTML5开发最佳实践应用》培训专家姚老师就HTML元素坐标定位应该注意的问题进行了详细介绍。

文档坐标和视口坐标

视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。如何获取浏览器滚动条的位置?Window对象的pageXOffsetpageYOffset属性在所有浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeftscrollTop属性获取滚动条位置。

查询元素的几何尺寸

判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect()方法。该方法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回leftrighttopbottom属性的对象。

这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标

在很多浏览器中，getBoundingClientRect()返回的对象还包括widthheight属性。但在原始的IE中未实现。

滚动元素

之前的getScrollOffsets方法可以查询滚动条的位置。该例子的scrollLeftscrollTop属性可以用来设置让浏览器滚动，但有一种更简单的方法从Javascript最早时期开始支持的。Window对象的scrollTop()方法接口一个点的坐标文档坐标，并作为滚动条的偏移量设置它们。

WindowscrollBy方法和scroll()scrollTo()类似，但是它的参数是相对的，并在当前滚动条的偏移量上增加。

如果想让某个元素在文档中可见，可以利用getBoundingClientRect()计算元素的位置，并转换为文档坐标，然后使用scrollTo()方法达到目的。但在需要显示Html元素上调用scrollIntoView()方法更方便。

scrollIntoView()的行为与设置window.location.hash为一个命名锚点的名字后浏览器产生的行为类似。

元素尺寸、位置和溢出

任何HTML元素的只读属性offsetWidthoffsetHeightCSS像素返回它的屏幕尺寸。返回的尺寸包含元素的边框和内边距，除去了外边距。

所有HTML元素拥有offsetLeftoffsetTop属性来返回元素的坐标。这些值是文档坐标，并直接指定元素的位置。当对于已定位元素的后代元素和一些其他元素，这些属性返回的坐标是相对于祖先元素的而非文档。

offsetParent属性指定这些属性所相对的父元素。如果offsetParentnull，这些属性都是文档坐标，因此，一般来说，用offsetLeftoffsetTop来计算元素的位置需要一个循环：

getElementPosition函数也不总是计算正确的值，下面看如何修复它。除了这些名字以offset开头的属性以外，所有的文档元素定义了其他两组属性，名字一组以client开头，另一组以scroll开头。

为了理解clientscroll属性，你需要知道元素的实际内容可能比分配用来容纳的盒子更大，因此单个元素可能有滚动条。内容区域是视口，就像浏览器窗口，当实际内容比视口大，需要把元素滚动套位置考虑进去。

clientWidthclientHeight类似offsetWidthoffsetHeight，区别在于它们不包含边框大小。只包含内容和内边距。同时，如果浏览器在内边距和边框之间添加了滚动条，clientWidthclientHeight不包含滚动条尺寸。在文档的根元素上查询这些属性时，它们的返回值和窗口的innerWidthinnerHeight属性值相等。

clientLeftclientTop属性没什么用：它们返回元素的内边距的外边框和它的边框的外边缘之间的水平距离和垂直距离。

scrollWidthscrollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容正好和内容区域匹配没溢出时，这些属性与clientWidthclientHeight相等。有溢出时，包含了溢出的内容尺寸。

scollLeftscrollTop指定元素滚动条的位置。在getScrollOffsets()方法中查询过它们。注意，scrollLeftscrollTop是可写的，通过设置它们来让元素中的内容滚动(HTML元素并没有类似Window对象的scrollTo()方法。