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;
  }
相关推荐
Mintopia13 分钟前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia13 分钟前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心15 分钟前
CSS 样式用法大全
前端·css·1024程序员节
皓月Code15 分钟前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
0129252016 分钟前
1.1 笔记 html 基础 初认识
前端·笔记·html
MoonBit月兔36 分钟前
MoonBit Pearls Vol.12:初探 MoonBit 中的 JavaScript 交互
开发语言·javascript·数据库·交互·moonbit
2501_9293826538 分钟前
[Switch大气层]纯净版+特斯拉版 20.5.0大气层1.9.5心悦整合包 固件 工具 插件 前端等资源合集
前端·游戏·switch·1024程序员节·单机游戏
非凡ghost39 分钟前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
www_stdio41 分钟前
深入理解JavaScript变量声明:var、let与const的全面解析
javascript