很多时候比如下拉加载更多这种组件都需要检测滚动到底部事件。一般我们的做法是这个样子,先获取视窗高度
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}
这样就可以实现滚动到底部的检测,比上一种办法简洁多了。