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

awkj 发布于2019-08-20 16:32 / 2910人阅读

摘要：很多时候比如下拉加载更多这种组件都需要检测滚动到底部事件。很明显就可以得出滚动到底部的判断判断是否滚动到底部上面这个方法比较麻烦还要处理浏览器兼容性。

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

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

超融合服务器 idc机房托管滚动到底部 jquery滚动到底部 js滚动条到底部 php滑动到底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82988.html

js实现 web页面的滚动条下拉时加载更多

摘要：一个更佳的方式是，当滚动条距离底部一定距离时，就动态加载更多，向服务端请求资源。代码总页数当前页数滚动条距离底部的距离没有更多了分页列表的接口相关参考页面在滚动条下拉时加载更多内容个人项目经验下拉加载更多实现监听滚动事件不执行 js实现 web页面的滚动条下拉时加载更多在手机上，数据列表的分页都是下拉到底部的时候会加载更多，但是，去年三月份的时候遇到了客户要求web页面也要下拉加载更...

antyiwei 2019-08-23 11:35 评论0 收藏0
关于ajax学习笔记

摘要：请求主体上行请求，有头部主体。如何避免缓存问题方法随机数随机数，我们不要只要小数点后面的数字上面就拼接一个随机字符串，保证每次不一样方法时间戳从年月日到这一刻的毫秒数。一、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识） ajax全称Asynchronous JavaScript and XML（异步的javascript和XML）,为什么会有这么一种技术的出现呢...

YancyYe 2019-08-26 12:15 评论0 收藏0
微信里面防止下拉"露底"组件

摘要：从本人这两个月移动实践的经验来看，微信的里面和的滑动效果无论是在安卓还是下的体验都很一般，有明显的卡顿现象，在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。前言在微信里面浏览页面的时候，有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面，用力往下扯的时候，如果页面上方出现了黑底，黑底上有一行诸如网页由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 评论0 收藏0
下拉刷新，上拉加载插件mescroll源码分析

摘要：最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。于是学习了下别人的插件（ps : 既然写不出好插件，就要会学习别人的）：官网github地址：https://github.com/mescroll/m... 1.整体预发结构 ;(function(name, definition) {...

frontoldman 2019-08-26 12:09 评论0 收藏0