offset、client、scroll、event 属性解析

offset

offsetTop、offsetLeft、offsetWidth、offsetHeight都是只读属性。

• offsetTop 表示当前元素相对 offsetParent 元素顶部内边距的距离。
• offsetLeft 表示当前元素相对 offsetParent 元素左边内边距的距离。
• offsetWidth 表示元素的宽度，包括边框 border、内边距 padding、滚动条 scrollBar、宽度 width。
• offsetHeight 表示元素的高度，包括边框 border、内边距 padding、滚动条 scrollBar、高度 height。

client

clientWidth、clientHeight都是只读属性。

• clientWidth 表示元素的内部宽度，包括内边距 padding、宽度 width，不包括边框 border、滚动条 scrollBar。
• clientHeight 表示元素的内部高度，包括内边距 padding、高度 height，不包括边框 border、滚动条 scrollBar。

scroll

scrollTop、scrollLeft是可读写属性，scrollWidth、scrollHeight是只读属性。

• scrollTop 表示当前元素顶部相对可见视口顶部的距离。
• scrollLeft 表示当前元素左边相对可见视口左边的距离。
• scrollWidth 表示元素所需内容的最小宽度，包括内边距 padding、宽度 width，不包括边框 border、滚动条 scrollBar。
• scrollHeight 表示元素所需内容的最小高度，包括内边距 padding、高度 height，不包括边框 border、滚动条 scrollBar。

event

event.clientX、event.clientY、event.pageX、event.pageY 都是只读属性。

• event.clientX/event.clientY 是目标距离浏览器可视范围的X轴/Y轴坐标。
• event.pageX/event.pageY 是目标距离 document 最左上角的X轴/Y轴坐标。