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;
  }
相关推荐
mapbar_front42 分钟前
面试问题—上家公司的离职原因
前端·面试
昔人'1 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'1 小时前
css `dorp-shadow`
前端·css
流***陌1 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生2 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴2 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者2 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术2 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀2 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
清风徐来QCQ2 小时前
css总结
前端