div懒加载大致思路 switch多范围 - 酸溜土豆丝-web前端学习博客

div
大致实现思路第一个区县装载数据，然后根据滚动事件,滚到哪层时，加载数据。
关键点就是当当前视口的高度+滚到高度>当前层的高度时装载数据
其中各个层的高度范围可以用swicth来区分注意switch(true)，

top = document.documentElement.scrollTop || document.body.scrollTop;
         //滚动高度+视口的高度>当前层的高度的话，要显示。
         var cl = top + base.getViewPort().pageHeight;
         switch(true) {
           case cl < areaB1.offsetHeight + areaB1.offsetTop && cl > areaB1.offsetTop:
             if(!areaB1.classList.contains("areaFlag")) {
               areaB1.classList.add("areaFlag");
               areaB1.innerHTML = "b1";
             }
             break;
           case cl < areaB2.offsetHeight + areaB2.offsetTop && cl > areaB2.offsetTop:
             if(!areaB2.classList.contains("areaFlag")) {
               areaB2.classList.add("areaFlag");
               areaB2.innerHTML = "b2";
             }
             break;
           case cl < areaC1.offsetHeight + areaC1.offsetTop && cl > areaC1.offsetTop:
             if(!areaC1.classList.contains("areaFlag")) {
               areaC1.classList.add("areaFlag");
               areaC1.innerHTML = "c1";
             }
             break;
           case cl < areaC2.offsetHeight + areaC2.offsetTop && cl > areaC2.offsetTop:
             if(!areaC2.classList.contains("areaFlag")) {
               areaC2.classList.add("areaFlag");
               areaC2.innerHTML = "c2";
             }
             break;
           case cl < areaD1.offsetHeight + areaD1.offsetTop && cl > areaD1.offsetTop:
             if(!areaD1.classList.contains("areaFlag")) {
               areaD1.classList.add("areaFlag");
               areaD1.innerHTML = "d1";
             }
             break;
           case cl < areaD2.offsetHeight + areaD2.offsetTop && cl > areaD2.offsetTop:
             if(!areaD2.classList.contains("areaFlag")) {
               areaD2.classList.add("areaFlag");
               areaD2.innerHTML = "d2";
             }
             break;
         }

你只需将对应的数据装载进去即可。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #areaA,
      #areaB1,
      #areaB2,
      #areaC1,
      #areaC2,
      #areaD1,
      #areaD2 {
        height: 1100px;
        margin: 0 auto;
        white-space: nowrap;
        overflow: auto;
        background: gray;
      }
    </style>
  </head>
  <body>
    <h1>北A区分布如下</h1>
    <div id="areaA">
      <div class="areaA13"></div>
      <div class="areaA12"></div>
      <div class="areaA11"></div>
      <div class="areaA10"></div>
      <div class="areaA9"></div>
      <div class="areaA8"></div>
      <div class="areaA7"></div>
      <div class="areaA6"></div>
      <div class="areaA5"></div>
      <div class="areaA4"></div>
      <div class="areaA3"></div>
      <div class="areaA2"></div>
      <div class="areaA1"></div>
    </div>
    <h1>北B1(西边 永久)区分布如下</h1>
    <div id="areaB1">
      <div class="areaB113"></div>
      <div class="areaB112"></div>
      <div class="areaB111"></div>
      <div class="areaB110"></div>
      <div class="areaB19"></div>
      <div class="areaB18"></div>
      <div class="areaB17"></div>
      <div class="areaB16"></div>
      <div class="areaB15"></div>
      <div class="areaB14"></div>
      <div class="areaB13"></div>
      <div class="areaB12"></div>
      <div class="areaB11"></div>
    </div>
    <h1>北B2(东边 永久)区分布如下</h1>
    <div id="areaB2">
      <div class="areaB213"></div>
      <div class="areaB212"></div>
      <div class="areaB211"></div>
      <div class="areaB210"></div>
      <div class="areaB29"></div>
      <div class="areaB28"></div>
      <div class="areaB27"></div>
      <div class="areaB26"></div>
      <div class="areaB25"></div>
      <div class="areaB24"></div>
      <div class="areaB23"></div>
      <div class="areaB22"></div>
      <div class="areaB21"></div>
    </div>
    <h1>北C1区(西边、永久)分布如下</h1>
    <div id="areaC1">
      <div class="areaC113"></div>
      <div class="areaC112"></div>
      <div class="areaC111"></div>
      <div class="areaC110"></div>
      <div class="areaC19"></div>
      <div class="areaC18"></div>
      <div class="areaC17"></div>
      <div class="areaC16"></div>
      <div class="areaC15"></div>
      <div class="areaC14"></div>
      <div class="areaC13"></div>
      <div class="areaC12"></div>
      <div class="areaC11"></div>
    </div>
    <h1>北C2区(东边、永久)分布如下</h1>
    <div id="areaC2">
      <div class="areaC213"></div>
      <div class="areaC212"></div>
      <div class="areaC211"></div>
      <div class="areaC210"></div>
      <div class="areaC29"></div>
      <div class="areaC28"></div>
      <div class="areaC27"></div>
      <div class="areaC26"></div>
      <div class="areaC25"></div>
      <div class="areaC24"></div>
      <div class="areaC23"></div>
      <div class="areaC22"></div>
      <div class="areaC21"></div>
    </div>
    <h1>北D1区(西边、短期)分布如下</h1>
    <div id="areaD1">
      <div class="areaD113"></div>
      <div class="areaD112"></div>
      <div class="areaD111"></div>
      <div class="areaD110"></div>
      <div class="areaD19"></div>
      <div class="areaD18"></div>
      <div class="areaD17"></div>
      <div class="areaD16"></div>
      <div class="areaD15"></div>
      <div class="areaD14"></div>
      <div class="areaD13"></div>
      <div class="areaD12"></div>
      <div class="areaD11"></div>
    </div>
    <h1>北D2区(东边、短期)分布如下</h1>
    <div id="areaD2">
      <div class="areaD213"></div>
      <div class="areaD212"></div>
      <div class="areaD211"></div>
      <div class="areaD210"></div>
      <div class="areaD29"></div>
      <div class="areaD28"></div>
      <div class="areaD27"></div>
      <div class="areaD26"></div>
      <div class="areaD25"></div>
      <div class="areaD24"></div>
      <div class="areaD23"></div>
      <div class="areaD22"></div>
      <div class="areaD21"></div>
    </div>
    <script src="js/Base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var base = new Base(),
        areaA = base.getDom("areaA"),
        areaB1 = base.getDom("areaB1"),
        areaB2 = base.getDom("areaB2"),
        areaC1 = base.getDom("areaC1"),
        areaC2 = base.getDom("areaC2"),
        areaD1 = base.getDom("areaD1"),
        areaD2 = base.getDom("areaD2");
      areaA.innerHTML = "a";
      window.onscroll = function(event) {
        var top = "";
        scrollBox();
        function scrollBox() {
          top = document.documentElement.scrollTop || document.body.scrollTop;
          //滚动高度+视口的高度>当前层的高度的话，要显示。
          var cl = top + base.getViewPort().pageHeight;
          switch(true) {
            case cl < areaB1.offsetHeight + areaB1.offsetTop && cl > areaB1.offsetTop:
              if(!areaB1.classList.contains("areaFlag")) {
                areaB1.classList.add("areaFlag");
                areaB1.innerHTML = "b1";
              }
              break;
            case cl < areaB2.offsetHeight + areaB2.offsetTop && cl > areaB2.offsetTop:
              if(!areaB2.classList.contains("areaFlag")) {
                areaB2.classList.add("areaFlag");
                areaB2.innerHTML = "b2";
              }
              break;
            case cl < areaC1.offsetHeight + areaC1.offsetTop && cl > areaC1.offsetTop:
              if(!areaC1.classList.contains("areaFlag")) {
                areaC1.classList.add("areaFlag");
                areaC1.innerHTML = "c1";
              }
              break;
            case cl < areaC2.offsetHeight + areaC2.offsetTop && cl > areaC2.offsetTop:
              if(!areaC2.classList.contains("areaFlag")) {
                areaC2.classList.add("areaFlag");
                areaC2.innerHTML = "c2";
              }
              break;
            case cl < areaD1.offsetHeight + areaD1.offsetTop && cl > areaD1.offsetTop:
              if(!areaD1.classList.contains("areaFlag")) {
                areaD1.classList.add("areaFlag");
                areaD1.innerHTML = "d1";
              }
              break;
            case cl < areaD2.offsetHeight + areaD2.offsetTop && cl > areaD2.offsetTop:
              if(!areaD2.classList.contains("areaFlag")) {
                areaD2.classList.add("areaFlag");
                areaD2.innerHTML = "d2";
              }
              break;
          }
        }
      } //end scroll
    </script>
  </body>
</html>

Tags: js, switch