元素滚动 scroll 与 scroll 事件，你必须知道的CSS盒模型

---

我们在此主要研究 element.scrollTop 与 element.scrollHeight，其他两个同理

一： element.scrollHeight：

============================

返回自身的实际高度**（包含padding，不包含边框）**，返回值无单位，主要针对的是内容超过了盒子大小溢出的情况，返回的值包括了溢出的高度

例如以下情况：

我们此时使用此方法返回的不再是盒子大小 200，而是包括了溢出部分的高度

我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友

---

二：element.scrollTop：

========================

返回滚动后被卷上去的距离，返回值无单位，此处说的滚动上去是我们针对溢出的情况，往往会在样式里加上 overflow：auto，这是给盒子加上了滚动条，就可以拖动滚动条查看溢出的部分，所以此时返回的值是 拖动滚动条后，内容是相对往上移动的，返回值就是向上移动的那部分的高度

（但在此处我们还需要补充一个事件：scroll事件**，即拖动滚动条就会触发**）