Jquery 滚动条滑动到底部触发加载更多
2018-07-16 17:50
3409 人阅读
分类：
如果一个页面内容比较多，通常做法就是分页
分页有两种处理方法
1：采用分页插件进行分页（通常适用于后台管理端）
2：页面滑动到底部自动加载下一页（适用于移动端或其他特殊需求）
这里介绍下第二种实现方式
核心要点：监听滚动条滑动，并计算滚动条距离底部距离，小于某个值的时候触发事件，加载下一页
下面是完整代码：
<html>
<head>
<title>滚动条滑动到底部事件</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(function () {
//console.log($(".content").height())
$("#active_content").append(getDataHtml());
scrollBarMonitor();
});
//函数节流处理，防止滚动触发多次
var throttle = function (method) {
clearTimeout(method.tId);
method.tId = setTimeout(function () {
scrollHandler();
}, 300);
}
//滚动条滚动监听
var scrollBarMonitor = function () {
document.getElementById("active_content").addEventListener('scroll', function () {
throttle(scrollHandler);
});
}
var scrollHandler = function () {
//内容高度(包含被隐藏的内容高度)
var scrollHeight = $("#active_content").get(0).scrollHeight;
//滚动高度(该元素在可见区域之上被隐藏部分的高度(单位：像素))
var scrollTop = $("#active_content").scrollTop();
//可视高度
var height = $("#active_content").height();
//检测是否滑动到底部(20是div内边距，如果没有设置，则不需要减)
//如果滑动到底部 bootomHeight = 0
var bootomHeight = scrollHeight - scrollTop - height - 20;
if(bootomHeight < 3){
//为了模拟加载效果，这里等待1s
$("#active_content").append(getLoadingHtml());
setTimeout(loadMore,1000);
}
}
var loadMore = function(){
$(".loading").remove();
$("#active_content").append(getDataHtml());
}
var getDataHtml = function(){
var content = ' <div>scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。</div>'+
' <div>当一个元素的实际高度超过其显示区域的高度时，在一定的设置下，'+
' 浏览器会为该元素显示相应的垂直滚动条。</div>'+
' <div><span style="color:red">scrollTop()此时，'+
' 返回的就是该元素在可见区域之上被隐藏部分的高度(单位：像素)。</span></div>'+
' <div>如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)，</div>'+
' <div>或者当前元素是不可垂直滚动的，那么scrollTop()将返回0。</div>';
return content;
}
var getLoadingHtml = function(){
var content = '<div class="loading">正在加载中...</div>';
return content;
}
</script>
<style type="text/css">
.content{
height:212px;
width: 240px;
overflow-y:auto;
margin: 0 auto;
margin-top: 50px;
padding-bottom: 20px;
}
.content-data{
}
.loading{
text-align: center;
font-size: 14px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="active_content" class="content">
</div>
</body>
</html>效果预览:/content/demo/jqScrollBottom/index.html
和博主交个朋友吧
