下拉无限加载
2020年12月10日 | 分类: js | 评论: 0 | 浏览: 1024
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title></head>
<body>
<style>.lis{height:600px;border:1px solid #ccc;overflow:auto;} .ite{height:200px;background:#f0f;} .h{height:200px;} .ii{height:40px;background:#0ff;}</style>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>$o = function(s) {
return document.querySelector(s);
}
var _next = function(lis, ite) {
var r = {};
var fn;
r.on = function(f, is) {
if (is) {
f();
}
fn = f;
}
lis.addEventListener('scroll',
function() {
if (ite.offsetTop > lis.scrollTop - ite.offsetHeight && ite.offsetTop < lis.scrollTop + lis.clientHeight) fn();
}) return r;
}
var next = _next($o('.lis'), $o('.ii'));
next.on(function() {
console.log(123)
},
true)</script>
</body>
</html>顶一下 ▲()
踩一下 ▼()
发表留言
登录后才能发表留言，立即 登录 或 注册
提交 (Ctrl+Enter)
