许多时刻比方下拉加载更多这类组件都须要检测转动到底部事宜。平常我们的做法是这个模样，先猎取视窗高度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
}

如许就能够完成转动到底部的检测，比上一种方法简约多了。