如何判断一个元素出现在用户的视野

我们先看一下下面的一些元素高度的一些方法

$(window).height(); //用于获取浏览器显示区域的高度
$(window).width();//用于获取浏览器显示区域的宽度
$(document.body).height();//获取页面文档的高度
$(document.body).width();//获取页面文档的宽度
$(document).scrollTop();//获取垂直滚动条到顶部的垂直距离
$(document).scrollLeft(); //获取水平滚动条到左边的水平距离
原生js获取文档的所在的位置
document.querySelector('XXX').offsetTop // 顶部

如何判断元素出现在可视范围呢?

• 页面很长，无法全部显示在浏览器页面，或者某个元素容器内
• 用户通过滚动界面来看到隐藏界面的内容

我门就可以通过计算来判断元素是否出现在用户视野中

我们进行计算需要有三个值.

• 浏览器的高度 / 或者某个元素容器的高度
• 用户滚动的距离
• 元素在页面中的位置

下面看一下 jQuery 判断元素的一些方式

• 浏览器的高度 / 或者某个元素容器的高度：$(window).height()
• 用户滚动的距离:$(window).scrollTop()
• 元素在页面中的位置:$('元素').offset().top
  下图比较生动 ：
  窗口操作 示意图

示意代码 如下 ：

$('元素').offset().top <= $(window).height() + $(window).scrollTop()

当元素在页面中的位置小于浏览器高度或者元素容器高度和用户滚动的高度时，可以得到元素出现在用户视野 ，那么现在 就可以进行下一步操作了，比如图片懒加载，及瀑布流布局，皆是利用此原理！

如何判断浏览器滚动到最底部

和上面的原理类似

• 页面的高度 $('body').height();
• 用户滚动的距离 $(window).scrollTop()
• 浏览器的高度 $(window).height()
• 当浏览器的高度 + 用户滚动的距离 = 页面的高度 我们可以判断浏览器滚动到最低部了
  代码如下 ：

if($(window).height() + $(window).scrollTop() = $('body').height()) {
      console.log('到达浏览器底部')
}