关于屏幕的宽高

要点速览

看显示器大小 → screen.availWidth / availHeight
看浏览器窗口 → document.documentElement.clientWidth/Height
看页面总长 → document.documentElement.scrollHeight
看元素自身宽 → offsetWidth（带边框）/ clientWidth（不带）
看元素相对页面位置 → getBoundingClientRect().top + scrollY
看元素相对父级位置 → offsetTop

# 总结
共分屏幕、窗口、文档、元素4 大类，覆盖所有 JS 宽高 / 位置 API；
offsetTop 相对定位父级，screen.width 是显示器物理宽度；
日常开发：clientWidth/clientHeight、offsetWidth/offsetHeight、getBoundingClientRect() 最常用。

拓展

# 屏幕：获取用户显示器的物理尺寸，和浏览器窗口、网页无关。
screen.width 整个显示屏宽度
screen.height 整个显示屏高度
screen.availWidth 整个显示屏可用宽度，排除任务栏
screen.availHeight 整个显示屏可用高度，排除任务栏
适用场景：判断用户显示器大小、适配大屏设备。

# 浏览器窗口：获取浏览器可见窗口的大小，不包含书签栏、控制台，只算网页可视区域。
window.outerWidth 浏览器整个窗口宽度（包含边框）
window.outerHeight 浏览器整个窗口高度（包含标题栏）
window.innerWidth 窗口可视宽度（包含滚动条）
window.innerHeight 窗口可视高度（包含滚动条）
document.documentElement.clientWidth 窗口可视宽度（不包含滚动条）
document.documentElement.clientHeight 窗口可视高度（不包含滚动条）

# 文档：获取整个网页的实际大小（包含被滚动隐藏的部分）。
document.documentElement.scrollWidth 网页总宽度（所有内容，含溢出）
document.documentElement.scrollHeight 网页总高度（最常用！获取页面全长）
document.body.scrollWidth 同 scrollWidth（兼容旧浏览器）
document.body.scrollHeight 同 scrollHeight（兼容旧浏览器）

# 元素：这是开发最常用的一组，专门获取DOM 元素的宽高和坐标。
## 元素的宽高
clientWidth 元素内部宽度 content + padding（不含 border、滚动条）
clientHeight 元素内部高度 content + padding（不含 border、滚动条）
offsetWidth 元素可见宽度 content + padding + border + 滚动条
offsetHeight 元素可见高度 content + padding + border + 滚动条
scrollWidth 元素实际总宽度（含溢出隐藏内容） 全部内容宽度
scrollHeight 元素实际总高度（含溢出隐藏内容） 全部内容高度
## 元素的位置
offsetTop 元素上边框 到 最近定位父级 顶部距离 最近的 position:relative/absolute 父元素
offsetLeft 元素左边框 到 最近定位父级 左侧距离 同上
offsetParent 返回 offsetTop/Left 所参考的父元素 —
scrollTop 元素内部向上滚动的距离 元素自身滚动条
scrollLeft 元素内部向左滚动的距离 元素自身滚动条
getBoundingClientRect().top 元素上边框 到 视口顶部 的距离 浏览器可视窗口
getBoundingClientRect().left 元素左边框 到 视口左侧 的距离 浏览器可视窗口
getBoundingClientRect().bottom 元素下边框 到 视口顶部 的距离 可视窗口
getBoundingClientRect().right 元素右边框 到 视口左侧 的距离 可视窗口

# 滚动距离：获取页面 / 元素滚动了多少。
window.scrollY / pageYOffset 页面垂直滚动距离（推荐）
window.scrollX / pageXOffset 页面水平滚动距离（推荐）
document.documentElement.scrollTop 页面滚动距离（兼容写法）
document.body.scrollTop 页面滚动距离（兼容写法）

混淆

# offsetWidth vs clientWidth
offsetWidth = 内容 + 内边距 + 边框 + 滚动条
clientWidth = 内容 + 内边距（无边框、无滚动条）

# window.innerWidth vs documentElement.clientWidth
innerWidth：包含滚动条
clientWidth：不包含滚动条

# offsetTop vs getBoundingClientRect().top
offsetTop：相对定位父级（固定不变）
getBoundingClientRect().top：相对视口（滚动会变）