原生js实现触底加载下一页(2不引用VUE)

定义一个scroll容器

javascript

  var data =[1, 2, 3, 4];
  function render() {
    document.getElementById('app').innerHTML = '';
    let tempHtml = ''
    data.forEach(item => {
      tempHtml += `  

      ${item}
    
`;
    })
    app.innerHTML = tempHtml;
  }
  window.onload = _ => {
    console.log(app);
    render();
    app.addEventListener('scroll', e => {
      const { scrollTop: upOverHeight, clientHeight, scrollHeight: allHeight } = app;
      if (upOverHeight + clientHeight + 10 > allHeight) {
        console.log('滚动到底')
        data.push(Math.random())
        data.push(Math.random())
        data.push(Math.random())
        render();
      }
      console.log(data)
      console.warn(app.scrollHeight, app.clientHeight, app.scrollTop);

    });
  };

样式

  #app {
    background-color: #fafafa;
    width: 500px;
    height: 500px;
    overflow: auto;
    box-shadow: 0 0 8px #aaaaaa;
  }

  .block {
    background-color: white;
    width: 480px;
    line-height: 200px;
    height: 200px;
    margin: 10px 0;
    text-align: center;
  }