JS 尺寸相关

1、获取视口的宽高

  ①含滚动条

window.innerWidth
window.innerHeight

  ②不含滚动条

document.documentElement.clientWidth
document.documentElement.clientHeight

2、获取文档的滚动距离

document.documentElement.scrollTop ||  document.body.scrollTop
document.documentElement.scrollLeft || document.body.scrollTop

3、获取元素的滚动距离

ele.scrollTop
ele.scrollLeft

4、获取元素的尺寸

 ①含边框

ele.offsetWidth
ele.offsetHeight

  ② 不含边框

ele.clientWidth
ele.clientHeight

5、获取当前元素距离已经定位的父元素的水平/垂直距离

ele.offsetLeft
ele.offsetTop

6、浏览器的大小

 window.outerHeight
 window.outerWidth

7、获取鼠标在视口内的坐标

 event.clientX
 event.clientY

8、获取鼠标在界面内的坐标

 event.pageX
 event.pageY

9、 获取浏览器距离屏幕左顶点的距离

window.screenX
window.screenY

10、获取鼠标距离屏幕左顶点的距离

event.screenX
event.screenY