下拉无限加载
2020年12月10日 | 分类: js | 评论: 0 | 浏览: 1037
<!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)