你真的懂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>
offsetParent.png
从控制台我们得到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有了相对定位，结果呢？
offsetParent.png
很明显，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>
offsetWidth.png
可以注意到，我们设置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>
offsetTop&offsetLeft.png
那么我们再扩展一下，如果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>
scrollWidth.png
细心的童鞋注意到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>
scrollTop&scrollLeft.png
结语
以上就是关于offset和scroll的总结，知识点并不深，但却可以对相关知识加深理解，如有错误之处，欢迎指正
