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

Simaoya2024-07-08 22:59

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

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;
  }