原生JS+防抖，模拟滚动加载数据

思路：
滚动条头部距离顶部的距离加上，滚动套自身的高度等于整个页面的高度

滚动条高度（即可视窗口的高度）

let clientHeight = document.documentElement.clientHeight

滚动条头部距离顶部的高度

let scrollTop = document.documentElement.scrollTop

整个页面的高度（包括溢出看不见的高度）

let scrollHeight = document.documentElement.scrollHeight

实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style></style>
</head>
<body>
  <ul>
  	<!-- 100个li -->
  </ul>
  <script>
    function debounce (method, delay) {
      
      
      let timer = null
      return function () {
      
      
        let self = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(() => {
      
      
          method.apply(self, args)
        }, delay)
      }
    }

    function addData () {
      
      
      const ul = document.getElementsByTagName('ul')[0]
      for (let index = 0; index < 10; index++) {
      
      
        let li = document.createElement('li')
        li.innerHTML = 1
        ul.appendChild(li)
      }
    }

    window.onscroll = debounce(function () {
      
      
      // 可视区域的高度加上溢出的高度相当于页面总高度
      let scrollHeight = document.documentElement.scrollHeight
      // 滚动头部距离顶部的高度
      let scrollTop = document.documentElement.scrollTop
      // 整个可视区域的高度（眼见的滚动条高度就是整个窗口可视区域的高度，窗口有多高，滚动条就有多高）
      let clientHeight = document.documentElement.clientHeight
      console.log(scrollHeight, scrollTop, clientHeight)
      // 当滚动条到达底部时
      if (clientHeight + scrollTop === scrollHeight) {
      
      
        console.log('到底了，数据加载中')
        setTimeout(() => {
      
      
          addData()
          console.log('数据加载完成')
        }, 1000)
      }
    }, 200)

    
  </script>
</body>
</html>

原生JS+防抖，模拟滚动加载数据

猜你喜欢