使用原生JS实现滚动条滚动到页面底部继续加载数据
版权申诉
5星 · 超过95%的资源 42 浏览量
更新于2024-09-13
收藏 66KB PDF 举报 "JS实现滚动条滚动到页面底部继续加载"
本文主要介绍了使用原生JS实现滚动条滚动到页面底部继续加载的方法。该方法通过为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。
首先，需要了解滚动条卷起来的高度、窗口高度、文档的总高度几个概念。滚动条卷起来的高度是指浏览器滚动条卷起来的高度，窗口高度是指浏览器窗口的高度，文档的总高度是指整个文档的高度。
计算滚动条是否滚动到了浏览器底部的算法如下：
滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50
如果这个判断为true，则表示滚动条滚动到了底部。
在实例中，我们可以看到，使用了原生的JS来处理滚动条滚动到页面底部继续加载的功能。首先，我们使用CSS来设置基本的样式，然后使用JS来处理滚动条的事件。
在JS代码中，我们首先为window添加一个scroll事件，然后在事件处理函数中判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部的算法。
此外，我们还可以使用jQuery的方法来处理滚动条滚动到页面底部继续加载的功能，但是本文主要介绍了使用原生的JS来处理该功能。
本文主要介绍了使用原生JS实现滚动条滚动到页面底部继续加载的方法，以及计算滚动条是否滚动到了浏览器底部的算法。同时，本文还提供了一个实例来演示如何使用原生JS来处理滚动条滚动到页面底部继续加载的功能。
知识点：
* 滚动条卷起来的高度
* 窗口高度
* 文档的总高度
* 计算滚动条是否滚动到了浏览器底部的算法
* 使用原生JS实现滚动条滚动到页面底部继续加载
* 使用jQuery的方法来处理滚动条滚动到页面底部继续加载
* CSS基本样式设置
* JS事件处理函数
* 滚动条的事件处理
相关概念：
* 滚动条
* 滚动事件
* 页面底部
* 加载新数据
* 原生JS
* jQuery
* CSS
* 事件处理函数
js实现滚动条滚动到页面底部继续加载实现滚动条滚动到页面底部继续加载
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点
可以分析一下也算有所得。
原理原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则
加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下
滚动条卷起来的高度滚动条卷起来的高度 + 窗口高度窗口高度 > 文档的总高度文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/；如果这个判断为true则表示滚动
条滚动到了底部。
实例
<style type="text/css">
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.waterfllow-loading{
z-index: 2000;
display:none;
}
.waterfllow-loading.active{
display:block;
}
.waterfllow-loading img.loading-progress{
position: fixed;
/*设置等待条水平居于窗口正中*/
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
/*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
bottom: 30px;
}
</style>
<div class="waterfllow-loading">
<img class="loading-progress" src="busy.gif">
</div>
<script type="text/javascript">
//图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
$(window).on('scroll',function(){
if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
waterallowData();
}
});
function waterallowData(){
$('.waterfllow-loading').addClass('active');
/*$.ajax({
url:url,
type:"post",
data: params,
success:function(data,textStatus,jQXHR){
//添加数据
...
//隐藏加载条
$('.waterfllow-loading.active').removeClass('active');
}
});*/
}
获取页面顶部被卷起来的高度函数获取页面顶部被卷起来的高度函数
下载后可阅读完整内容，剩余3页未读，立即下载
2021-01-19 上传
2020-10-25 上传
2021-01-19 上传
2021-01-21 上传
2020-10-16 上传
2020-12-11 上传
2020-10-25 上传
2009-06-27 上传
weixin_38550812
- 粉丝: 3
- 资源: 894
我的内容管理
展开
最新资源
- 探索AVL树算法：以Faculdade Senac Porto Alegre实践为例
- 小学语文教学新工具：创新黑板设计解析
- Minecraft服务器管理新插件ServerForms发布
- MATLAB基因网络模型代码实现及开源分享
- 全方位技术项目源码合集：***报名系统
- Phalcon框架实战案例分析
- MATLAB与Python结合实现短期电力负荷预测的DAT300项目解析
- 市场营销教学专用查询装置设计方案
- 随身WiFi高通210 MS8909设备的Root引导文件破解攻略
- 实现服务器端级联：modella与leveldb适配器的应用
- Oracle Linux安装必备依赖包清单与步骤
- Shyer项目：寻找喜欢的聊天伙伴
- MEAN堆栈入门项目： postings-app
- 在线WPS办公功能全接触及应用示例
- 新型带储订盒订书机设计文档
- VB多媒体教学演示系统源代码及技术项目资源大全
