原生js实现滚动加载更多数据

最新推荐文章于 2024-05-13 08:47:21 发布

琴～～

最新推荐文章于 2024-05-13 08:47:21 发布

阅读量2k

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/125286552

版权

原生js实现滚动加载更多数据

1、滚动形成的条件

元素必须有固定的高度；
元素的内容必须要溢出（形成滚动条）；
监听元素的滚动；

2、滚动小案例

<!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>
   .box {
     width: 200px;
     height: 100vh;//必须要有高度
     overflow-y: auto;//滚动条的设计
   }
   body {
     overflow: hidden;//body会有默认的滚动条，如果不需要的话，可以将其进行隐藏
   }
 </style>
</head>
<body>
  <div class="box">
    曾经以为有着大堆大堆的年华搁着无处安放，可那过去了的，终究成了回忆。那些美好时光里的希望便像海上的泡沫般轻轻一碰就破了，碎了。于是我骄傲的抬头，在毒辣的阳光下大步走着。那些快乐啊悲伤啊的日子，被我坚决的抛在脑后！

    记得小时候，总爱把手指放进嘴里吮吸，那味道咸咸的，却也甜甜的。被大人看见后，总是强制性的让我把手指拿出来，可自己又不听，结果便哇哇大哭起来。不过这招也还真管用，每次哭时，爸妈总会哄着自己：“乖，别哭，给你吃糖糖了！”自己便会破涕而笑。那时候吃到了糖就感觉自己是全世界最幸福的人了。以为世界就这么简单，哭哭就好了。
    渐渐长大了，这个习惯不用大人纠正自己也慢慢改掉了。如果现在还把手指放进嘴里，别人铁定会说你幼稚，说你傻。也许是因为害怕自己也被别人说成那样吧，于是就改掉了，也许也不是改掉的，是被自己淡忘了吧．．．．．．
    进了初中以后才发现生活并不是那样简单。那时刚经历了一些事，便很伤心很委屈的倒在朋友肩头哭了（其实现在想想挺幼稚的），不知道是自己变了还是世界变了？渐渐就开始懂得了虚伪，也学会了隐藏伤痛。于是便不再像从前那样哭了，于是
  </div>
  <script>
    const box = document.querySelector('.box');
    /*
    元素滚动形成的条件：
    1、必须有固定的高度；
    2、内容必须要溢出（形成滚动条）；
    3、监听元素的滚动；
    */
    box.onscroll = function() {
      const {clientHeight, scrollHeight, scrollTop} = box;
      console.log(clientHeight, scrollHeight, scrollTop);//随着滚动，这三者的值随时变化
      /*
      1、clientHeight:元素的可视高（height + padding）;
      2、scrollHeight:元素实际内容的高；
      3、scrollTop:元素滚动出去的高；
      4、元素距离底部的距离：scrollHeight- scrollTop - clientHeight
      */
     const distance = scrollHeight- scrollTop - clientHeight;
      // 当用户滚动到底部距离不到100px，则发起请求（写你的请求代码）
      if(distance <= 100) {
        /*
        发送请求：
        页码需要+1；
        在请求的过程中不可以再次发起请求（可以利用一个变量来进行控制）；
        请求的数据，需要和原来的数据进行拼接；
        */
      }
    }
  </script>
</body>
</html>