JS进阶系列 --- offset&scroll&client

JavaScript特效页面的展示

Offset

offsetWidth和offsetHight （盒子盒模型的宽/高）

这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

offset宽/高 = 盒模型的宽/高；

注意：此属性是只读的，与box-sizing的取值有关

关于box-sizing请参考这篇博客：学会使用box-sizing布局

当box-sizing = content-box（在宽度和高度之外绘制元素的内边距和边框）

offsetWidth =width+padding+border；
offsetHeight =height+padding+border；

当box-sizing = border-box（为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制）

offsetWidth =Math.max(width,(padding+border))；
offsetHeight =Math.max(height,(padding+border))；

offsetLeft和offsetTop （与父盒子左/上面的距离）

父盒子 = 父盒子有定位 ? 父盒子 : body

offsetLeft/offsetTop = 与父盒子左/上面的距离

offsetParent （父盒子节点）

父盒子 = 父盒子有定位 ? 父盒子 : body
offsetParent = 父盒子

Scroll

scrollWidth和scrollHeight

scrollWidth/scrollHeight与offsetWidth/offsetHight很像。但是有两点不同：

1. scrollWidth/scrollHeight计算不包括border，而offsetWidth/offsetHight计算包括了border
2. 如果有内容超出了，scrollWidth/scrollHeight显示内容的宽度/高度）

scrollLeft和scrollTop

网页，被浏览器遮挡的头部和左边部分。

被卷去的头部和左边部分。

Client

clientWidth和clientHight

clientWidth/clientHeight与offsetWidth/offsetHight很像,但是不包括border

clientTop/clientLeft

clientTop/clientLeft = 盒子的border宽高

Event

pageX/pageY 和 clientX/clientY 和 offsetX/offsetY 和 screenX/screenY
直接上图

其中offsetX/offsetY：
鼠标相对于触发事件的元素的位置，以元素盒子模型的内容区域的左上角为原点，如果有border，可能出现负值。

参考博客：
clientY,offsetY,screenY/layerY,pageY备忘笔记
js进阶：offset家族 Scroll家族 client家族
关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 （详细图解）