<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>IScroll 判断是否滚动到底部并加载更多数据</title>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
.wrapper {
position: absolute;
top: 0;
bottom: 50px;
right: 0;
width: 200px;
background: #f8f8f9;
}
.wrapper ul {
margin: 0;
padding: 0 10px;
}
.m-item {
position: relative;
height: 100px;
border: 1px solid green;
list-style: none
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: #444;
}
.mCustomScrollBox{overflow: unset;}
.mCSB_container{overflow: unset;}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<ul id="m-list">
</ul>
</div>
<div class="footer"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
<script type="text/javascript">
$(function() {
var dom = {
wrapper: $('#wrapper'),
list: $('#m-list')
};
var html = '';
for (var i = 0 ; i < 10; i++) {
html += '<li class="m-item js-item">' + i + '</li>'
}
dom.list.html(html);
function scrollEndFn () {
if (this.y - 200 < this.maxScrollY && (this.directionY === 1)) {
console.log('滚动到底部');
var html = '';
for (var i = 0 ; i < 10; i++) {
html += '<li class="m-item js-item">' + i + '</li>'
}
dom.list.append(html);
if (myScroll) {
myScroll.refresh();
}
}
}
myScroll = new IScroll('#wrapper', {
click: true, //支持点击
scrollbars: true, //显示滚轮
mouseWheel: true, //鼠标滚轮可以滚动
interactiveScrollbars:true, //滚动条可以拖动
preventDefault: false, //禁止阻止浏览器默认行为，可以选择文字
});
myScroll.on('scrollEnd', scrollEndFn);
});
</script>
</body>
</html>
