vue中触底实现逻辑

//在需要滑动的区域添加这个属性

<div class="scroll" @scroll="handleScroll">
   内容
</div>


methods: {
    handleScroll() {
      const container = document.querySelector(".scroll");
      const { scrollTop, scrollHeight, clientHeight } = container;
      if (scrollTop + clientHeight >= scrollHeight) {
        this.dis = true;
      }
}


.scroll {
  height: 90vh;
  overflow: auto;
}

解释：

scrollTop属性是一个描述容器元素内容的top值与容器元素(viewport)视口顶部top值之间的差值，即容器中内容向上滑动后超出容器视口的部分。可以通过修改此属性控制滚动状态。

clientHeight是描述容器高度的dom属性。

scrollHeight是描述容器内容高度的dom属性。

三个属性的关系如下图所示：