用getBoundClientRect检测浏览器滚动到底部事件

不少时候好比下拉加载更多这种组件都须要检测滚动到底部事件。通常咱们的作法是这个样子，先获取视窗高度window.innerHeight，而后获取整个html文档高度document.body.scrollHeight,再获取滚动条卷上去的距离，document.body.scrollTop,若是滚动卷上去的距离大于等于整个文档高度-视窗高度就说明滚动条到了底部。一图胜千言！

就相似于咱们经过一个窗户观察一幅画同样，窗户就是浏览器视窗，那幅画就是html文档。很明显就能够得出滚动到底部的判断

//判断是否滚动到底部
if(document.body.scrollTop>=document.body.scrollHeight - window.innerHeight){

//todosomething

}

---

上面这个方法比较麻烦还要处理浏览器兼容性。笔者无心中看到了一个getBoundClientRect()，这个方法比较新颖。下面和你们分享下：

用getBoundClientRect()判断是否滚动到底部

getBoundClientRect()说明

这个方法由一个dom元素调用返回一个Object ClientRect对象，
该对象有六个属性
left，top,bottom,right,height,width.
left dom左边界距离视窗左边距离，
top dom上边界距离视窗上部距离，
right dom右边界距离视窗左边距离，
bottom dom下边界距离视窗上部的距离，
height dom的高度，
width dom的宽度

实现检测滚动到底部

对于html文档中最底部的dom元素，假设变量名称是dom

if(document.body.scrollTop>=dom.getBoundClientRect().top+dom.getBoundClientRect().height){
//doSomething
}

这样就能够实现滚动到底部的检测，比上一种办法简洁多了。