背景

身为一个前端工程师，每次在做关于滚动或者定位之类的交互时，或多或少都会用到offset、scroll之类的元素属性值来计算距离，但是每次都是现用现百度，从来没有真正系统地弄明白其中的原理及用法；在马上十一国庆假期以及项目压力较小的情况下，特作此篇总结以弥补相关知识的缺失

 

offset相关

以offset开头的属性有5个，分别是：offsetParent、offsetWidth、offsetHeight、offsetTop以及offsetLeft，下面我们来一一了解它们

 

1.offsetParent

代码

1  2  3  4   
      5    6    9 10 11 
     12 
     
      13   
      
       14     我是div15   
      
16 
     
17 22 23 

 

运行结果

 

从控制台我们得到inner的offsetParent是body元素，那么就有问题了“inner的父元素是outer啊，但为什么offsetParent不是它？”，那是因为元素的offsetParent是距离它最近的一个具有定位的父辈元素，这里“具有定位”4个字很重要，如果你怀疑这个结论，那我们就再往下看

 

代码

1  2  3  4   
      5    6   12 13 14 
     15 
     
      16   
      
       17     我是div18   
      
19 
     
20 25 26 

看出不同了吗，outer有了相对定位，结果呢？

 

运行结果

 

很明显，inner在一层层向上查找时，找到outer的时候，发现outer有定位（inner不管outer具体是什么定位，只要有定位就好，除了position: static），那么关于element.offsetParent，我们可以有以下结论“元素的offsetParent是距离该元素最近的且具有定位的父辈元素，如果没有符合条件的父辈元素，那么body就是它的offsetParent”

 

2.offsetWidth与offsetHeight

以offsetWidth为例，offsetWidth=width+padding*2+border*2+[横向滚动条width]，这里滚动条的高度是否计算在offsetWidth内，各浏览器在具体实现上存在差异，例如chrome就没有将它计算在内；说到这，何为offsetWidth与offsetHeight?不着急，看看下面的代码示例

 

代码

1  2  3  4   
      5    6   17 18 19 
     
      20   我是outer21 
     
22 27 28 

 

运行结果

 

可以注意到，我们设置outer的width是360px，但在页面中，outer的实际宽度是480px，这是因为offsetWidth是元素的布局宽度，而非样式宽度，即当元素真正渲染到页面后的宽度，我们在屏幕上看到的这个宽度就是width+padding*2+border*2后的结果值，所以，关于offsetWidth的结论是：“offsetWidth是元素渲染到页面后的实际宽度尺寸，同理，offsetHeight就是元素渲染到页面后的实际高度尺寸”

 

3.offsetTop与offsetLeft

关于这两个属性，我想聪明的小伙伴已经猜到了，它们就是“元素与它的offsetParent的上边界与左边界的距离”

 

代码

1  2  3  4   
      5    6   22 23 24 
     
      25   
      
       26     我是inner27   
      
28 
     
29 35 36 

 

运行结果

那么我们再扩展一下，如果outer不具有定位呢，offsetTop与offsetLeft会是什么？当然是inner距离body的上边界与左边界的值了

 

scroll相关

1.scrollWidth

一个元素要想在scrollWidth有值，那么它要满足至少以下两点：

1.元素要有宽度，并且宽度是生效的（如果你给一个行内元素设置width，宽度是不生效的）

2.元素的内部要有一个子元素，或者文本；子元素的width要大于该元素；如果是文本，那么文本在不换行的情况下要超出该元素的水平边界。

总结一句就是：元素必须是可滚动的

看下面示例：

代码

1  2  3  4   
      5    6   25 26 27 
     
      28   
      
       29     我是inner30   
      
31 
     
32 37 38 

 

运行结果

 

细心的童鞋注意到outer.scrollWidth不等于outer的宽度，而且inner的宽度，更准确的说是inner.offsetWidth，不信你可以把inner的padding注释打开看看O(∩_∩)O哈！

 

2.scrollHeight

同上，原理相同

 

3.scrollTop&scrollLeft

scrollTop与scrollLeft就是当可滚动的元素发生滚动时，里面的子元素分别从上边界和左边界出去了多少距离

 

代码

1  2  3  4   
      5    6   24 25 26 
     
      27   
      
       28     我是inner29   
      
30 
     
31 46 47 

 

运行结果

 

 

结语

以上就是关于offset和scroll的总结，知识点并不深，但却可以对相关知识加深理解，如有错误之处，欢迎指正

 

原文地址：