js addEventListener监听scroll滚动条 距离底部一定距离，加载数据，超过最大高度移除监听事件

//测试dmeon
 .testBox{
    height: 450px;
    border: 1px solid rebeccapurple;
    width: 500px;
    color: blueviolet;
    overflow-y: auto;
  }

在这里插入代码片
```<div class="testBox">
    <div class="sunBox">
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
      <div class="childBox">今天天气不错</div>
    </div>
  </div>

```javascript
<script>
    let sumH ="";
    function scrollH(){
      let testBox = document.getElementsByClassName("testBox");
      let sunBox = document.querySelector(".sunBox");
      let appendDiv = document.createElement("div");
      appendDiv.innerText = "我在追加";
      console.log(testBox[0].scrollTop,"scrollTop");//滚动条距离顶部高度
      console.log(testBox[0].scrollHeight,"scrollHeight");//整个内容的高度包括隐藏的内容
      console.log(testBox[0].offsetHeight,"offsetHeight");//盒子的高度
      sumH = testBox[0].offsetHeight + testBox[0].scrollTop;
      if(sumH <=1100 && sumH+50>testBox[0].scrollHeight){
          sunBox.appendChild(appendDiv)
      }
      if(sumH>1000){
        window.removeEventListener("scroll", scrollH,true); //监听滚动事件
      }
      console.log(sumH,"sumH")
     }
    window.addEventListener("scroll", scrollH,true); //监听滚动事件
    
  </script>