学习笔记，写的不是很全，兼容性尚未测试。
| 属性 | 作用 | 兼容性 |
|
screen.width screen.heihgt |
||
|
screen.availWidth screen.availHeight |
||
|
window.innerWidth window.innerHeight |
浏览器视口尺寸，去除浏览器菜单栏、工具栏、状态栏，但包含滚动条的尺寸， | |
|
window.outerWidth window.outerHeight |
浏览器窗口外边框尺寸 | |
| 浏览器窗口外边框尺寸 | ||
|
window.screenX window.screenY window.screenTop window.screenLeft |
窗口在屏幕中的位置 | |
|
window.scrollX window.pageXOffset window.scrollY window.pageYOffset |
文档滚动位置 | |
| Element.getBoundingClientRect() | 返回元素对应border-box方框到视口的偏移坐标， | |
| Element.getClientRects() | 返回类数组，对以inline方式显示的元素来说，每行行框都是一个方框，返回所有这些方框到视口的偏移坐标，对显示为块级的元素来说，效果同getBoundingClientRect() | |
| document.elementFromPoint() | 指定相对于视口的坐标，返回该坐标处的元素。如果有定位元素，返回z-index最大（最上层）的，否则返回该处在文档树中最深的节点元素。 | |
|
Element.offsetWidth Element.offsetHeight Element.offsetLeft Element.offsetTop |
元素滚动可见部分内容border-box的尺寸。offsetLeft, offsetTop返回到offsetParent的距离 | |
| Element.offsetParent | 偏移的上级参照元素 | |
|
Element.clientWidth Element.clientHeight Element.clientLeft Element.clientTop |
元素滚动可见部分内容padding-box（不含滚动条）的尺寸，对显示为inline的元素来说，始终返回0。clientLeft, clientTop返回padding-box外边缘到border-box外边缘的距离，通常来说就是边框宽度。但对于从右到左书写的语言来说，垂直滚动条出现在padding-box左侧，所以client-left还包括了滚动条的宽度。 |
|
|
Element.scrollWidth Element.scrollHeight Element.scrollLeft Element.scrollTop |
padding-box滚动整体的尺寸。在没有内容溢出时，scrollWidth, scrollHeight和clientWidth, clientHeight是相等的。 scrollLeft, scrollTop为视口相对元素左上角的滚动偏移量，且为可写属性。 | |
|
window.scroll() window.scrollTo() |
||
| window.scrollBy() | ||
| Element.scrollIntoView() |