总结一下常用的一些位置api（针对chorme和webkit）
window && document
pc端
-
innerWidth页面窗口的宽度 -
innerHeight页面窗口的高度 -
outerWidth浏览器的宽度 -
outerHeight浏览器的高度 -
window.screenTop浏览器距离屏幕上边的距离 -
window.screenLeft浏览器距离屏幕左边的距离 -
window.screen.height显示器的高度 -
window.screen.width显示器的宽度 -
window.screen.availHeight显示器减去固定占据的一些空间（工具栏）的高度 -
window.screen.availWidth显示器减去固定占据的一些空间（工具栏）的宽度 -
document.documentElement.clientwidth页面窗口的宽度-边框 -
document.documentElement.clientHeight页面窗口的高度-边框 -
document.body.clientwidth页面窗口的宽度-边框 -
document.body.clientHeight页面窗口的高度-边框
移动端
<meta name="viewport" content="width=1000,initial-scale=1">
IMG_4379.jpg
-
innerWidth窗口的宽度(375) -
innerHeight窗口的宽度 -
outerWidth0 -
outerHeight0 -
document.documentElement.clientwidth布局窗口的宽度(1000) -
document.documentElement.clientHeight布局窗口的高度 -
document.body.clientwidth布局窗口的宽度(1000) -
document.body.clientHeight布局窗口的高度
元素
滑动条直接占据元素的content+padding的空间，只有clientWidth和clientHeight需要考虑滑动条占据的空间
image.png
clientWidth元素padding+content-滑动条之后的宽度clientHeight元素padding+content-滑动条之后的高度clientTop元素border-top的高度clientLeft元素border-left的宽度offsetWidth元素padding+content+border的宽度offsetHeight元素padding+content+border的高度offsetTop父元素的margin到元素的border的距离（高度方面）offsetLeft父元素的margin到元素的border的距离（宽度方面 ）scrollWidth元素实际内容区域（content+padding）的宽度scrollHeight元素实际内容区域（content+padding）的高度scrollTop内容超出其宽高的时候，元素被卷起的高度scrollLeft内容超出其宽高的时候，元素被卷起的宽度
鼠标
鼠标的坐标
-
screenX显示器左上角 -
screenY显示器左上角 -
clientX浏览器窗口左上角 -
clientY浏览器窗口左上角 -
offsetX源元素（srcElement）的左上角 -
offsetY源元素（srcElement）的左上角 -
pageX文档的左上角 -
pageY文档的左上角
