vue判断元素滚动到底部后加载更多

背景:需要判断在元素滚动到底部后自动加载更多操作。

div:

bash 复制代码
div class="medium-msg-main" id="mediumScroll">
          <div v-for="(item,i) in focusNewsList" :key="i" class="medium-msg-box left-bg mb-5">
            <img class="ml-10" :src="item.img">
          </div>
        </div>

js:

bash 复制代码
 const mediumScroll = document.getElementById("mediumScroll");
  mediumScroll.addEventListener("scroll", (e) => {
    // console.log(e)
    //变量scrollTop是滚动条滚动时,距离顶部的距离
    let scrollTop = e.target.scrollTop;
    //变量clientHeight是可视区的高度
    let clientHeight = e.target.clientHeight;
    //变量scrollHeight是滚动条的总高度
    let scrollHeight = e.target.scrollHeight;
    //滚动条到底部的条件
    if (scrollTop + clientHeight == scrollHeight) {
      //写后台加载数据的函数
      console.log("距顶部" + scrollTop + ",可视区高度" + clientHeight + ",滚动条总高度" + scrollHeight);
    }
  })

css:

bash 复制代码
  .medium-msg-main {
    position: relative;
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
  }
相关推荐
JosieBook8 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
刘大猫.15 分钟前
npm ERR! cb() never called!
前端·npm·node.js·npm install·npmm err·never called
咔咔一顿操作19 分钟前
常见问题三
前端·javascript·vue.js·前端框架
前端程序媛Ying20 分钟前
点击按钮滚动到底功能vue的v-on:scroll运用
javascript
上单带刀不带妹20 分钟前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
电商API大数据接口开发Cris36 分钟前
Node.js + TypeScript 开发健壮的淘宝商品 API SDK
前端·数据挖掘·api
还要啥名字39 分钟前
基于elpis下 DSL有感
前端
一只毛驴44 分钟前
谈谈浏览器的DOM事件-从0级到2级
前端·面试
用户8168694747251 小时前
封装ajax
前端
pengzhuofan1 小时前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web