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;
  }
相关推荐
Liamhuo18 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_18 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生18 小时前
React 组件渲染
前端·react.js
奔跑的蜗牛ing18 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
sjd_积跬步至千里18 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙18 小时前
前端基础避坑:3 个实用知识点的简单用法
前端
journs18 小时前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙18 小时前
elpis项目DSL设计分享
前端
李李记18 小时前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞18 小时前
快速掌握 ProseMirror 的核心概念
前端