视口坐标和文档坐标

整个浏览器

文档坐标：

不会随浏览器滚动而变化

• css指定元素位置时，文档坐标

视口坐标：

随浏览器滚动而变化

• 查询元素的位置，视口坐标
• 事件处理中的鼠标坐标，视口坐标

pageX和pageY

浏览器窗口滚动条的位置

• pageXOffset
  pageYOffset
  除ie8及以下

• scrollLeft和scollTop 适用于所有浏览器
  e.g.

查询窗口滚动条的位置

查询窗口的视口尺寸 clientWidth和clientHeight

查询窗口的视口尺寸

单个元素

查询一个元素视口的位置

getBoundingClientRect()

它不需要参数，返回一个包含left、right、top、bottom属性的对象
除IE浏览器外还包含 width和height属性

• 计算元素的文档位置

计算元素的文档位置

• 计算元素的width和height

计算元素的width和height

注getBoundingClientRect()返回元素的坐标包含border和padding,但不包含margin

getClientRects()

针对内联元素，可能占有多行，返回一个对象数组

注getBoundingClientRect()和getClientRects()返回的是静态快照，当视口改变时，不会实时更新

滚动浏览器 scrollTo

scrollTo

offsetLeft、offsetTop

相对父元素
e.g. 计算出该元素的文档位置

offsetLeft、offsetTop

元素的offset，client，scroll

概览

clientWidth和clientHeight

1.指的是padding和content
2.(pading和comtent)之前有滚动条,不包含滚动条
3.i,span内联元素该值返回0

offsetWidth和offsetHeight

1.指的是 border,padding和content

scrollWidth和srollHeight

1.指的是padding和content,和任何溢出的内容的尺寸
2.若没有溢出的内容的尺寸，和clientWidth和clientHeigh相等

clientLeft和clientTop

1.通常指的是border,若滚动条在左侧，还包含滚动条的宽度
2.内联元素指为0

offLeft和offTop

1.指的是相对于父元素的x,y坐标

scrollLeft和scrollTop

1.查询滚动条的位置
2.或指定滚动条的位置
3.或使用scrollTo
参考指南：
js权威指南 15章