你真的懂offset与scroll吗？

背景

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

offset相关

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

1.offsetParent

代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <title>offsetParent</title>
   <style>

   </style>
 </head>
 <body>
 <!--1.除了浏览器默认的，我们没有设置任何样式-->
 <div id="outer">
   <div id="inner">
     我是div
   </div>
 </div>
 <script>
   // 2.我们看看id="inner"元素的offsetParent是哪一个
   var inner = document.getElementById('inner')
   console.log(inner.offsetParent)
 </script>
 </body>
 </html>

运行结果

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

代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <title>offsetParent</title>
   <style>
     /*这里我们给outer一个相对定位*/
     #outer {
       position: relative;
     }
   </style>
 </head>
 <body>
 <!--1.除了浏览器默认的，我们没有设置任何样式-->
 <div id="outer">
   <div id="inner">
     我是div
   </div>
 </div>
 <script>
   // 2.我们看看id="inner"元素的offsetParent是哪一个
   var inner = document.getElementById('inner')
   console.log(inner.offsetParent)
 </script>
 </body>
 </html>

看出不同了吗，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?不着急，看看下面的代码示例

代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <title>offsetWidth</title>
   <style>
     #outer {
       position: relative;
       width: 360px;
       height: 300px;
       padding: 40px;

       overflow: scroll;
       border: 20px solid #ff552e;
     }
   </style>
 </head>
 <body>
 <div id="outer">
   我是outer
 </div>
 <script>
   var outer = document.getElementById('outer')

   console.log('offsetWidth:' + outer.offsetWidth)
 </script>
 </body>
 </html>

运行结果

 

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

3.offsetTop与offsetLeft

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

代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <title>offsetTop&offsetLeft</title>
   <style>
     #outer {
       position: relative;
       width: 360px;
       height: 300px;
       /*使用padding让outer与inner产生距离*/
       padding-top: 20px;
       padding-left: 10px;

       border: 1px solid #666;
     }
     #inner {
       height: 100px;
       border: 1px solid #ff552e;
     }
   </style>
 </head>
 <body>
 <div id="outer">
   <div id="inner">
     我是inner
   </div>
 </div>
 <script>
   var inner = document.getElementById('inner')

   console.log('offsetTop:' + inner.offsetTop)
   console.log('offsetLeft:' + inner.offsetLeft)
 </script>
 </body>
 </html>

运行结果

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

scroll相关

1.scrollWidth

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

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

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

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

看下面示例：

代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <title>scrollWidth</title>
   <style>
     #outer {
       position: relative;
       /*注意此处的值*/
       width: 360px;
       height: 300px;

       overflow: scroll;
       border: 1px solid #666;
     }
     #inner {
       /*注意此处的值*/
       width: 600px;
       height: 100px;

       /*padding: 10px;*/
       border: 1px solid #ff552e;
     }
   </style>
 </head>
 <body>
 <div id="outer">
   <div id="inner">
     我是inner
   </div>
 </div>
 <script>
   var outer = document.getElementById('outer')

   console.log('scrollWidth:' + outer.scrollWidth)
 </script>
 </body>
 </html>

运行结果

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

2.scrollHeight

同上，原理相同

3.scrollTop&scrollLeft

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

代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <title>scrollTop&scrollLeft</title>
   <style>
     #outer {
       position: relative;
       width: 360px;
       height: 300px;

       overflow: scroll;
       border: 1px solid #666;
     }
     #inner {
       /*inner的宽高都大于outer，所以outer水平垂直滚动条都会出现*/
       width: 600px;
       height: 600px;

       padding: 10px;
       border: 1px solid #ff552e;
     }
   </style>
 </head>
 <body>
 <div id="outer">
   <div id="inner">
     我是inner
   </div>
 </div>
 <script>
   var outer = document.getElementById('outer')

   // 未滚动
   console.log('未滚动')
   console.log('scrollTop:' + outer.scrollTop)
   console.log('scrollLeft:' + outer.scrollLeft)

   // 手动滚动，然后再次输出scrollTop
   setTimeout(function () {
     console.log('已滚动')
     console.log('scrollTop:' + outer.scrollTop)
     console.log('scrollLeft:' + outer.scrollLeft)
   }, 2000)
 </script>
 </body>
 </html>

运行结果

 

结语

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

原文地址：https://kittyslave.github.io/2017/09/29/%E4%BD%A0%E7%9C%9F%E7%9A%84%E6%87%82offset%E4%B8%8Escroll%E5%90%97%EF%BC%9F/