用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
}

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