offsetLeft,clientX ,offsetX ,window.pageYOffset定义和区别

offsetLeft,clientX ,offsetX 定义和区别

被卷去的距离 

scrollHeight： 对象的滚动高度（滚动条的高度，可滚动的高度）

scrollWidth： 对象的滚动宽度（同上）

scrollLeft： 对象左边界和窗口中目前可见内容的左端之间的距离（滚动条已滚动的距离）

scrollTop： 对象最顶端和窗口中可见内容的最顶端之间的距离（同上）

 

距离DOM边框的距离

offsetHeight： 对象相对于版面或offsetParent 的高度

offsetWidth： 对象相对于版面或offsetParent 的宽度

offsetLeft： 对象相对于版面或由 offsetParent 左侧位置

offsetTop：对象相对于版面或由 offsetTop 顶端位置

 

相对文档的距离

clientX： 相对文档的水平坐标

clientY： 相对文档的垂直坐标

clientWidth：相对文档的宽度（可见部分的宽度）

clientHeight：相对文档的高度

event.offsetX： 相对容器的水平坐标

event.offsetY ： 相对容器的垂直坐标

window.pageYOffset:

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。