手机端到底部实现分页请求加载(小demo代码如下)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#scrollBox{
position: fixed;
top: 206px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="scrollBox">
<div id="modBox">
<div style="height: 50px;width: 100%;border:2px solid red"></div>
<div style="height: 50px;width: 100%;border:2px solid red"></div>
<div style="height: 50px;width: 100%;border:2px solid red"></div>
<div style="height: 50px;width: 100%;border:2px solid red"></div>
//此处省略50行以上div代码
</div>
</div>
</body>
<script type="text/javascript">
document.querySelector('#scrollBox').addEventListener('scroll', divScrollEv, true)
function divScrollEv() {
var scrollHeight = document.querySelector('#scrollBox').scrollHeight;
var scrollTop = document.querySelector('#scrollBox').scrollTop;
var clientHeight = document.querySelector('#scrollBox').clientHeight;
if (scrollHeight - clientHeight <= (scrollTop+3)) {
console.log("success");
}
}
</script>
</html>