主题
尺寸大小 & 偏移量 & 滚动
示例
client 系列
clientTop/Left：内侧与外侧的相对坐标，可以看作是“边框”clientWidth/Height：元素的内容区 + 内边距（padding），不包括边框（border）、滚动条
scroll 系列
scrollLeft/Top：已滚动的水平/垂直距离scrollWidth/Height：内容区 + 内边距（padding）（含溢出隐藏部分）
offset 系列
offsetLeft/Top：元素相对于offsetParent左侧/上侧的偏移量offsetWidth/Height：元素的内容区 + 内边距（padding）+ 边框（border）宽度，不包含外边距（margin）
offsetParent
offsetParent 是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。
最近的祖先为下列之一：
- CSS 定位的（
position为absolute、relative、fixed或sticky） - 或
<td>，<th>，<table> - 或
<body>
有以下几种情况下，offsetParent 的值为 null：
- 对于未显示的元素（
display:none或者不在文档中）。 - 对于
<body>与<html>。 - 对于带有
position:fixed的元素。
<html>
document.documentElement 代表 <html> 元素，通常用于获取整个网页的大小。
| 类型 | 属性 | 说明 |
|---|---|---|
| 可见区域 | document.documentElement.clientWidth | 视口宽度（不含滚动条） |
document.documentElement.clientHeight | 视口高度（不含滚动条） | |
| 滚动尺寸 | document.documentElement.scrollWidth | 整个 HTML 文档的宽度 |
document.documentElement.scrollHeight | 整个 HTML 文档的高度 | |
| 滚动偏移 | document.documentElement.scrollTop | 页面垂直滚动距离 |
document.documentElement.scrollLeft | 页面水平滚动距离 |
提示
请注意：当 HTML 中没有 <!DOCTYPE HTML> 时，顶层级（top-level）几何属性的工作方式可能就会有所不同。可能会出现一些稀奇古怪的情况。
在现代 HTML 中，我们始终都应该写 DOCTYPE。
<body>
document.body 代表 <body>，但一般推荐用 document.documentElement 来获取页面尺寸，因为某些情况下 <body> 不包含整个页面。
| 类型 | 属性 | 说明 |
|---|---|---|
| 可见区域 | document.body.clientWidth | 视口宽度 |
document.body.clientHeight | 视口高度 | |
| 滚动尺寸 | document.body.scrollWidth | 整个 <body> 的宽度 |
document.body.scrollHeight | 整个 <body> 的高度 | |
| 滚动偏移 | document.body.scrollTop | 页面滚动距离（但一般用 documentElement.scrollTop） |
注意
- 在 标准模式 下，
documentElement.scrollTop是正确的滚动距离。 - 在 怪异模式（Quirks Mode） 下，可能
document.body.scrollTop也能获取滚动值。
浏览器
浏览器窗口的尺寸由 window 提供，包括 视口尺寸、窗口尺寸、滚动位置。
| 类型 | 属性 | 说明 |
|---|---|---|
| 可见区域 | window.innerWidth | 浏览器视口宽度（含滚动条） |
window.innerHeight | 浏览器视口高度（含滚动条） | |
| 窗口整体尺寸 | window.outerWidth | 整个浏览器窗口的宽度（包括工具栏、边框等） |
window.outerHeight | 整个浏览器窗口的高度（包括工具栏、边框等） | |
| 滚动偏移 | window.scrollY | 页面垂直滚动距离（等价于 document.documentElement.scrollTop） |
window.scrollX | 页面水平滚动距离（等价于 document.documentElement.scrollLeft） |
提示
由于历史原因，存在了这两种属性，但它们是一样的：
window.pageXOffset是window.scrollX的别名。window.pageYOffset是window.scrollY的别名。
设置滚动
- 通过更改
scrollTop/scrollLeft来滚动常规元素。 - 方法
scrollBy(x,y)将页面滚动至 相对于当前位置的 (x, y) 位置。例如，scrollBy(0,10)会将页面向下滚动 10px。 - 方法
scrollTo(pageX,pageY)将页面滚动至 绝对坐标，使得可见部分的左上角具有相对于文档左上角的坐标 (pageX, pageY)。就像设置了scrollLeft/scrollTop一样。要滚动到最开始，我们可以使用scrollTo(0,0)。 scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。scrollIntoView([alignToTop])- 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的
scrollIntoViewOptions: { block: "start", inline: "nearest" }。这是这个参数的默认值。 - 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的
scrollIntoViewOptions: { block: "end", inline: "nearest" }。
- 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的
scrollIntoView(scrollIntoViewOptions)behavior：定义滚动是立即的还是平滑的动画。该选项是一个字符串，必须采用以下值之一：smooth：滚动应该是平滑的动画。instant：滚动应该通过一次跳跃立刻发生。auto：滚动行为由scroll-behavior的计算值决定。
block：定义垂直方向的对齐，start、center、end或nearest之一。默认为start。inline：定义水平方向的对齐，start、center、end或nearest之一。默认为nearest。
禁止滚动
例如，禁止滚动 body：document.body.style.overflow = "hidden"
屏幕
window.screen 提供 设备屏幕 的信息。
| 类型 | 属性 | 说明 |
|---|---|---|
| 屏幕尺寸 | screen.width | 设备屏幕的物理宽度 |
screen.height | 设备屏幕的物理高度 | |
| 可用尺寸 | screen.availWidth | 去掉任务栏等 UI 后的可用宽度 |
screen.availHeight | 去掉任务栏等 UI 后的可用高度 | |
| 颜色深度 | screen.pixelDepth | 屏幕颜色深度（位数） |
screen.colorDepth | 颜色深度（一般等于 pixelDepth） |