下拉无限加载

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)
Copyright 2020-2024 xaoi博客 All Rights Reserved.