元素的尺寸、位置和滚动事件的判定

今天碰到了2个问题：

1. 如何判断页面滚动到底部?
2. 如何判断元素出现在视窗中？

---

老规矩先打开 MDN

屏幕快照 2018-10-27 18.06.26.png

看完一系列属性一大串的文字解释，一脸懵逼。不但没看懂，还把自己看晕了
然后我翻到了这2篇博客
用Javascript获取页面元素的位置- 阮一峰的网络日志
Element size and scrolling
图片真是像我这样文字理解力差的人的福音

接下来用图片来说明如何获取元素的尺寸和位置

盒模型

盒模型.png

几何模型

几何模型.png

为了便于理解，我们对几何模型进行分解

bg2009091402.gif

clientHeight 获取元素的高度 content+padding

---

metric-offset-parent@2x.png

offsetTop获取该元素的左上角与父容器（offsetParent对象）左上角的距离。

---

bg2009091403.gif

offsetHeight 获取元素包括偏移的高度 content+padding+偏移量

---

---

bg2009091404.gif

scrollHeight获取元素整体（包括超出变成滚动显示那一部分）的高度
scrollTop 获取滚动条滚动的垂直距离

---

有了这些武器，开头那2个问题就迎刃而解了

1 如何判断滚动条滚动到底部？

根据以上属性的介绍不难看出来，滚动条到底部的条件即为

scrollTop + clientHeight == scrollHeight

2 如何判断一个元素是否出现在视窗中？

$node.offset().top <= $(window).height() + $(window).scrollTop()