JS - 单页面无限加载页面

DEMO
功能： 实现听过滚动无限刷新增添新元素

监听 scroll 事件

通过监听 scroll 事件，在页面滚动到距离底部不到 100px 时，开始增添元素

image.png

    document.addEventListener('scroll', function(e) {
      if (document.documentElement.offsetHeight - pageYOffset - innerHeight < 100) {
         //此时操作 DOM 节点
         console.log('adding now....')
      }
    })

创建 加入 dom 节点

当滚动到 底部 100px 区域时，开始增添元素，为模拟真实页面获取时要请求网络带来的时间损耗，此处通过 setTimeout 模拟延时请求，

        //此时操作 DOM 节点
        setTimeout(() => {
          console.log('adding now....')
          new Array(10).fill(0).forEach(() => {
            var li = document.createElement('li')
            list.appendChild(li)
          })
        }, 1000)

修复重复执行

上面的代码有个问题，当滚动到底部100px时，在此滚动，同时会继续触发事件，一般我们不会有这样的需求

image.png

    //初始化 loading
   var loading = false
    loadingText.style.display = 'none'

    document.addEventListener('scroll', function(e) {
      // 此处判断 loading 状态
      if (loading === false && ... < 100) {
        // 设定 loading 状态为 true
        loading = true
        loadingText.style.display = 'block'

        setTimeout(() => {
          // 操作 DOM
          // 添加完元素，初始化 loading 状态为 false
          loading = false
          loadingText.style.display = 'none'
        }, 1000)
      }
    })

CSS修饰

尽肯能随机化创建元素颜色，

setTimeout(() => {
  //...
    new Array(10).fill(0).forEach(() => {
      var li = document.createElement('li')
      let c = list.childElementCount ** 2
      li.style.background = `rgba(${(c - 90) % 255},${c % 255},${(c + 110) % 255})`
      li.innerHTML = li.style.background
      list.appendChild(li)
    })
  //...
}, 1000)

    li {
      margin: 5px;
      transition: .2s
    }
    li:hover{
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

DEMO