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

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

原生js获取文档的所在的位置
document.querySelector('XXX').offsetTop // 顶部

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

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

我门就可以通过计算来判断元素是否出现在用户视野中
我们进行计算需要有三个值

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

jquery

• 浏览器的高度 / 或者某个元素容器的高度：$(window).height()
• 用户滚动的距离:$(window).scrollTop()
• 元素在页面中的位置:$('元素').offset().top
  
  

  image

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

当元素在页面中的位置小于浏览器高度或者元素容器高度和用户滚动的高度时，可以得到元素出现在用户视野

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

和判断元素是否出现在用户视野中的做法是一样的；

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

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