坐标计算中的offset，client，和scroll

前言

其实，我所有文章都是一边写一边学的，文章思路上基本上就是我自己的学习感悟过程，我喜欢通过写文章来揭露自己认知上的缺失，审判自己对知识点掌握程度。offset，client和scroll 这4个关于坐标计算的东西，说真的，我虽然有用过，但还是不能完全清楚它们本质和区别，当要用起来的时候自然就只能上网查了。所以库这东西，私底下还是少用的好，便利了开发，但基础的东西还是容易忘记的。

offset

offset 的意思就是“偏移”。偏移，在字面上看是有一定含义的，一个东西他原来有一个位置，但是由于外力或其他关系，位置发生了变化，前后位置信息变化就可以看作是偏移。在页面上来说，offset 有5个东西需要知道的，分别是：offsetParent、offsetWidth、offsetHeight、offsetTop、offsetLeft。

offsetWidth和offsetHeight

offsetWidth和offsetHeight基本就是同一个概念，很好理解，分别描述了一个元素的绝对宽度和绝对高度，不包括因 overflow 而导致未显示的部分，也就是其实际占据的宽度（高度），整型，单位像素。用一条计算公式就可以理解清楚：
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width

offsetParent

offsetParent 是一个比较重要的概念，任何元素的自身偏移量都是基于它的offsetParent而言的。offsetParent 尽管带了parent 一词，并它不等同于元素的父元素。元素的offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。举个例子


  
    
  

// 在没有css定位时，div.d2 的 offsetParent 是body，相关计算也是在body和div.d2间进行。



  
    
  

// div.d1进行了定位，div.d2 的 offsetParent 是div.d1，相关计算也是在div.d1和div.d2间进行。

注意：body节点的offsetParent为null！

offsetLeft和offsetTop

重点来了，offsetLeft和offsetTop是我们经常会用到的概念，用于计算页面元素的位置坐标。
obj.offsetLeft 指 obj 相对于html版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。
obj.offsetTop 指 obj 相对于html版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

实际情况下，当obj.offsetParent不是body时是比较好计算的，直接计算obj和obj.offsetParent的页面举例即可，计算公式是：
offsetLeft = offsetParent的padding-left + 中间元素的offsetLeft之和 + obj的margin-left
offsetHeight = offsetParent的padding-top + 中间元素的offsetTop之和 + obj的margin-top
但是，当obj.offsetParent为body或者为null时（就是说obj是body），计算往往就开始变得不一样，不一样的地方在与obj.offsetParent与计算点是没有关系的。从上面我们基本可以知道，offsetLeft（offsetHeight）就是从 html版面或由 offsetParent（前面的描述还是正确的，重点在“或”字）的padding box（盒计算模型的一种）左上角到obj border box左上角的距离。下面介绍一下几种特别一些的情况

当obj.offsetParent为body 且 body没有设置css定位时，计算是从html版面的padding box左上角开始计算的
当obj.offsetParent为body 且 body设置了css定位时，计算是从body的padding box左上角开始计算的
不会出现从html版面的margin box左上角开始计算的情况，也不建议对html元素设置边距一类的样式

scroll

页面上的滚动计算还是比较简单的，scroll一类有4个属性：scrollHeight、scrollWidth、scrollLeft和scrollTop。

obj.scrollHeight获取obj的滚动高度，如果obj没有纵向滚动条，则获取对象的实际高度
obj.scrollWidth获取obj的滚动高度，如果obj没有纵向滚动条，则获取对象的实际高度
obj.scrollLeft获取或设置obj的横向滚动条的滚动距离，如果obj没有横向滚动条，则返回0；对没有出现滚动条的obj设置scrollLeft值是无效的，它始终为0
obj.scrollTop获取或设置obj的纵向滚动条的滚动距离，如果obj没有纵向滚动条，则返回0；对没有出现滚动条的obj设置scrollTop值是无效的，它始终为0
当obj为body或html，且无滚动条时，scrollHeight和scrollWidth就等于版面（浏览器窗口）的可见大小值
window对象没有上述的4个属性，但是有scrollX和scrollY，意思和scrollLeft、scrollTop一致。window对象还有一个scrollTo(x,y)方法，让页面滚动到指定的坐标处。

client

client意思是“客户（端）”，然而和坐标计算没太大的联系。client一般都是指obj的content box可见部分的大小，不包含padding、border和滚动条。

clientHeight, clientWidth这两个属性大体上显示了元素内容的象素高度和宽度
clientLeft,clientTop这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0。clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离。