浏览器窗口宽高：
window.innerHeight - 浏览器窗口的高度
window.innerWidth - 浏览器窗口的宽度
包含滚动条 单位px
document.documentElement.clientWidth - 浏览器窗口的宽度
document.documentElement.clientHeight - 浏览器窗口的高度
不包含滚动条
页面滚动距离：
document.body.scrollTop - 向下滚动的距离
document.documentElement.scrollTop - 向下滚动的距离
document.body.scrollLeft - 向右滚动的距离
document.documentElement.scrollLeft - 向右滚动的距离
一般这两个值只能有一个生效，然后另一个就为0，所以可以（document.body.scrollTop+document.documentElement.scrollTop）来解决兼容问题
元素的宽高坐标：
offsetHeight - 元素高度
offsetWidth - 元素宽度
值包括自身宽高+padding+border，没有单位
元素.clientWidth - 元素宽度
元素.clientHeight - 元素高度
值包括自身宽高+padding，没有单位
offsetParent - 获取最近的定位元素
获取的是离当前元素最近的定位元素(absolute、relative)，如果没有，找上一层，直到html。
offsetLeft - 自身左侧到offsetParent左侧的距离：left + （margin-left）
offsetTop - 自身顶部到offsetParent顶部的距离 : top + （margin-top）
没有单位
offsetX - X坐标
offsetY - Y坐标
从元素内部左上角开始计算的坐标
pageX - X坐标
pageY - Y坐标
相对于页面左上角的坐标，会随着滚动条的滚动而加大
clientX - X坐标
clientY - Y坐标
相对于浏览器左上角的坐标不会随着滚动条的滚动而发生改变（不管页面滚动到哪里，都是根据窗口来计算坐标）
各种宽高坐标合集
原文：https://www.cnblogs.com/wangyubin/p/11604714.html
