JavaScript 视口
视口
首先理解视口（窗口）与文档的含义
- 视口是用户可以直接看到的网页区域，它通常小于整个网页的尺寸，所以文档尺寸一般大于视口尺寸
- 视口的尺寸不包括浏览器的UI元素，如工具条、菜单、标签页、状态栏等
- 当浏览器窗口大小改变时，视口的尺寸也会相应改变。
- 当用户滚动页面时，视口会移动，显示文档的不同部分。
- 视口的尺寸可以通过
window.innerWidth和window.innerHeight来获取
视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置
| 方法 | 说明 | 注意 |
|---|---|---|
window.innerWidth | 视口宽度 | 包括滚动条（不常用） |
window.innerHeight | 视口高度 | 包括滚动条（不常用） |
document.documentElement.clientWidth | 视口宽度 | |
document.documentElement.clientHeight | 视口高度 |
下面是获取尺寸的方法或属性
| 方法 | 说明 | 备注 |
|---|---|---|
| element.getBoundingClientRect | 返回元素在视口坐标及元素大小，包括外边距，width/height 与 offsetWidth/offsetHeight 匹配 | 窗口坐标 |
| element.getClientRects | 行级元素每行尺寸位置组成的数组 | |
| element.offsetParent | 拥有定位属性的父级，或 body/td/th/table | 对于隐藏元素 /body/html 值为 null |
| element.offsetWidth | 元素宽度尺寸，包括内边距、边框、滚动条 | |
| element.offsetHeight | 元素高度尺寸，包括内边距、边框、滚动条 | |
| element.offsetLeft | 相对于最近祖先定位元素的 X 轴坐标 | |
| element.offsetTop | 相对于最近祖先定位元素的 Y 轴坐标 | |
| element.clientWidth | 元素宽度，不包含边框，只包含内容和内边距 | 内联元素尺寸为 0 |
| element.clientHeight | 元素高度，不包含边框，只包含内容和内边距 | 内联元素尺寸为 0 |
| element.clientLeft | 内容距离外部的距离，滚动条在左侧时包括滚动条尺寸 | |
| element.clientTop | 内容距离顶部的距离，滚动条在顶部时包括滚动条尺寸 | |
| element.scrollWidth | 元素宽度，内容+内边距+内容溢出的尺寸 | |
| element.scrollHeight | 元素高度，内容+内边距+内容溢出的尺寸 | |
| element.scrollLeft | 水平滚动条左侧已经滚动的宽度 | |
| element.scrollTop | 垂直滚动条顶部已经滚动的高度 |
总结如下：
