今天碰到了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()
网友评论