如果要查看整张网页的水平的和垂直的滚动距离，要从 document.documentElement 元素上读取。
document.documentElement.scrollLeft document.documentElement.scrollTop Element.offsetHeight，Element.offsetWidth分别返回元素的高度和宽度，包括元素本身的高和宽、padding 和 border ，以及滚动条的高和宽。
如果元素的 display 为 none，则返回 0。
与 clientHeight 和 clientWidth 相比，我想这对属性用的更多一点，因为更多的时候我们需要获取的是元素的完整宽高。
Element.offsetLeft，Element.offsetTop返回当前元素左上角相对于 Element.offsetParent 节点的水平和垂直位移。
说到这个我们来了解下 Element.offsetParent：
Element.offsetParent 属性返回最靠近当前元素的、并且 CSS 的 position 属性不等于 static 的上层元素。
如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。
如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent属性指向
元素。摘自《阮一峰 JavaScript 教程》
相关方法 Element.getBoundingClientRect()返回一个对象，提供当前元素的大小、位置等信息。
我常用来它获取元素的宽高和坐标。
该对象有如下属性：
width
height
x 元素左上角相对于 视口 的横坐标
y
left
right
top
bottom
由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将 left 属性加上 window.scrollX ， top 属性加上 window.scrollY。
摘自《阮一峰 JavaScript 教程》
四 鼠标事件 MouseEvent 接口 let event = new MouseEvent('click', { // ... })通过 addEventListener 添加的 click 事件所产生的事件对象也是 MouseEvent 实例。
let box = document.querySelector('.box') box.addEventListener('click', (e) => { console.log(e) // 事件对象 })这个事件对象，也就是 MouseEvent 实例，有很多属性，这里来简单分析一下。
MouseEvent.clientX 和 MouseEvent.clientY只读属性
分别返回鼠标位置相对于 浏览器窗口 左上角的水平坐标和垂直坐标。（不受滚动距离的影响）
可以这样理解：
client 本来就是客户端的意思，web 中的客户端就是浏览器，那 clientX 和 clientY 自然就是相对于浏览器的位置了。
这两个属性还分别有一个别名 MouseEvent.x 和 MouseEvent.y 。
MouseEvent.screenX，MouseEvent.screenY只读属性
分别返回鼠标位置相对于 屏幕（显示器屏幕区域） 左上角的水平坐标和垂直坐标。
screen 是屏幕的意思，所以，你懂的。
MouseEvent.offsetX，MouseEvent.offsetY只读属性
分别返回鼠标位置相对于 目标节点（即当前元素） 左上角 padding 边缘 的 水平距离和垂直距离。
offset 有偏移的意思，所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值，和目标元素本身以及外部的元素都无关。
那 「padding 边缘」是什么意思呢？
我们拿图说话：
上图中三个元素分别有红蓝绿三种边框来区分，红蓝边框宽度为 1px ， 绿边框为 30px 。每个元素都有 padding 值。具体代码如下：
<!-- HTML --> <body> <div> <div>Hello</div> </div> </body> /* css */ body { border: 1px solid red; margin: 0; padding: 20px; } .parent { border: 1px solid blue; padding-top: 50px; } .hello { width: 100px; height: 100px; padding: 100px; border: 30px solid green; }我们给 hello 元素添加一个 click 时间监听函数：
// js let hello = document.querySelector('.hello') hello.addEventListener('click', (e) => { console.log(e) console.log(e.offsetX) console.log(e.offsetY) })分别点击 hello 元素的绿色边框和空白区域，会发现前者的值为负数，后者的值为整数，且都是相对空白区域的左上角开始计算的。
这就是我们一开始提到的 「鼠标位置相对于 目标节点（即当前元素） 左上角 padding 边缘 的 水平距离和垂直距离」 这句话的意思。
MouseEvent.pageX，MouseEvent.pageY只读属性
分别返回鼠标位置相对于文档左上角的距离。（包括滚动距离）
MouseEvent.movementX，MouseEvent.movementY只读属性
返回当前位置与上一个 mousemove 事件之间的水平距离和垂直距离。
很明显这两个属性和 mousemove 事件肯定有着密切的关系，所以我们再了解一下 mousemove 事件：