每次碰到元素滚动呀、鼠标拖动呀之类的通过对比位置来触发事件的需求时，都要花很多时间来百度怎么取到自己想要的那个值，什么scrollTop、offset等等，今天就把这些东西总结一下，以后再使用的话，就不用各种的百度了。
一，window窗口的各种距离
screen.width/height： 屏幕的宽度/高度
window.innerWidth/innerHeight ： 窗口显示区的宽度/高度
window.outerWidth/outerHeight ： 窗口的外部宽度/高度
window.pageXOffset/pageYOffset ： 当前页面相对于窗口显示区左上角的 X 位置 / Y 位置
window.screenLeft/screenTop ： 当前窗口的左上角在屏幕上的的 x 坐标和 y 坐标； Firefox支持screenX和screenY。
二，元素的各种距离 （el指当前的dom元素）
el.style.width/height/left/right：获取元素内联样式的宽度/高度/left值/right值。 （不包括padding、border和margin，并且返回的值会带单位）
window.getComputedStyle().width/height/left/right： 获取元素最终使用的width height left right。 （不包括padding、border和margin，并且返回的值会带单位）
el.offsetWidth/offsetHeight ： 获取元素的宽度/高度。（包括padding、border和margin）
el.offsetTop/offsetLeft： 获取元素距离最近的采用定位的祖先元素的 top/Left，如果祖先元素没有采用定位的，则返回body
<style>
*{ margin:0; padding: 0; } #top{ width:100px; height:100px; } </style> <body>
<div id='top'></div> <div id="box"> <div id="d1"></div> </div> </body>
<script>
let d1 = document.getElementById('d1')
let box = document.getElementById('box')
console.log(d1.offsetTop) // 100 d1的父元素没有定位元素，所以offsetTop的距离就是d1到body的上部距离，也就是top的高度。
box.style.position = 'relative'
console.log(d1.offsetTop) // 0 d1的父元素改为相对定位，那么这时候offsetTop就是d1到父元素box的距离，也就是0
</script>
el.clientWidth/clientHeight/clientLeft/clientTop ： 获取当前元素的内部宽度/内部高度/左边框宽度/上边框宽度 （包含padding，如果有滚动条，则要去掉滚动条的宽度） （一般不用来获取el的属性，都是用来获取window的）
el.scrollWidth/scrollHeight ： 如果没有滚动条，则和clientWidth/height的值一样，如果有滚动条，则为内部元素的总高度/宽度（包含padding，有滚动条则去掉滚动条的宽度，较少用）
el.scrollTop/scrollLeft ： 如果元素为滚动元素，包含滚动条，则为元素离父元素的滚动高度和滚动左边距。（一般配合scroll事件来动态获取滚动高度）
三： 触点的距离
这里的触点就是事件中event对象所包含的各种位置信息。