WebApi offset scroll client 三大家族

1.offset

element.offsetTop 返回元素相对,带有定位父元素,上方的偏移(如果父元素都没有定位,则相对body)
element.offsetLeft  
element.offsetWidth 返回,元素盒子的width(你给它设样式时写的width)+padding+border-width,的宽度(内容是否超出不影响其值)
element.offsetHeight 
element.offsetParent 返回你是依照谁返回的上面那些值(如果父元素有定位的,则返回父元素,如果都没有则返回body)

2.client

element.clientTop 返回元素上边框大小
element.clientLeft 
element.clientWidth 返回,元素盒子的width+padding,不含边框的 宽度(内容是否超出不影响其值)
element.clientHeight 

3.scroll

element.scrollTop 返回被卷去的上侧距离
element.scrollLeft 
element.scrollWidth 返回,当内容没有超出盒子,则是盒子宽度width+padding,当内容超出盒子,则是实际内容+padding,不含边框
element.scrollHeight 

4.三个系列宽度做个对比

offset 包含边框,其余两个不含
scroll 当内容超出时,按照内容尺寸算的,其余那两个都是盒子尺寸

5.各个系列常用点

offset 经常用于获得元素位置: offsetTop
client 经常用语获得盒子大小: clientWidth
scroll 经常用于获取或设置滚动距离: scrollTop , 和滚动内容总高度: scrollHeight

页面滚动距离 window.pageXOffset