html 元素位置信息总结

1. offsetLeft，offsetTop 描述的是相对于有效父元素的位置，这里之所以说有效父元素，是因为一个元素的定位不一定相对于其直接父类，假设当前元素采用 absolute 定位，其位置是相对于其最近的非 static 定位的元素，即沿着 dom 树向上查找，找到第一个非 static 元素（dom 属性  offSetParent 指向该值），这个元素的左上角，就是当前元素的位置坐标原点。

2. offsetWidth，offsetHeight 描述的是元素可视的尺寸，不含 margin，含有 css 中元素的 padding 和 width 和h eight 的值，即盒式模型中去除 margin 后的部分。

3. scrollHeight，scrollWidth 描述的是当元素有 scroll 属性时，其所包含内容的 尺寸，类似 scroll view 中内容的尺寸

4. scrollLeft, scrollTop 一般此值与 offsetLeft，offsetTop相同，当前元素如果有 scroll 属性时，此值才可能有变化，当内容滚动时，scrollLeft, scrollTop 表示当前显示视口相对于内容尺寸的位置

           scroll width，height

   +-  -  -   -  -  -  -  -  -  -  -  -  -  -  -  -  -+

   |             scroll(left, top)                   | <----------------------------  scroll （滚动）的内容

                 +------------------------+          

   |             |                              |   <----|------------------------------ html element （例如有 scroll 属性的 div）

                 |                              |         

   |            +------------------------+          |

                 offset width height                   

   |                                                       |

   |                                                       |

  

   |                                                       |

   +-  - - - - - - - - - -  - - - - - - -  - - - -  -+