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

最新推荐文章于 2024-02-02 13:35:08 发布

boboj1

最新推荐文章于 2024-02-02 13:35:08 发布

阅读量657

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端防抖

本文链接：https://blog.csdn.net/Wind_AN/article/details/122322827

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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

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

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>

boboj1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS+防抖，模拟滚动加载数据

思路：滚动条头部距离顶部的距离加上，滚动套自身的高度等于整个页面的高度滚动条高度（即可视窗口的高度）let clientHeight = document.documentElement.clientHeight滚动条头部距离顶部的高度let scrollTop = document.documentElement.scrollTop整个页面的高度（包括溢出看不见的高度）let scrollHeight = document.documentElement.scrollHeight.
复制链接

扫一扫