滚动条触底事件

<a-scrollbar id="scrollableElement">
      <div v-for="item in 50" :key="item"></div>
</a-scrollbar>

1、获取滚动盒子

2、获取盒子的总高度

3、获取盒子的可视高度

4、当前盒子的的滚动高度

5、(滚动高度 + 可视高度 >= 盒子的总高度) = 元素触底

// 滚动条触底事件
const scrollBottom = () => {
  // 获取滚动盒子
  const scrollableElement = document.getElementById("scrollableElement");

  scrollableElement.addEventListener("scroll", function () {
    // 元素的总高度
    const elementHeight = scrollableElement.scrollHeight;
    // 元素的可视高度
    const visibleHeight = scrollableElement.clientHeight;
    // 当前的滚动高度
    const scrollTop = scrollableElement.scrollTop;

    // 判断是否触底
    // scrollTop != 0 解决列表重置时触发的问题
    // 可以做预留空间，未必非要完全触底才加载scrollTop + visibleHeight + 100 >= elementHeight
    if (scrollTop != 0 && scrollTop + visibleHeight >= elementHeight) {
      console.log("元素触底了!");
      // 在这里可以执行你想要的操作，例如加载更多内容
    }
  });
};

onMounted(() => {
  scrollBottom();
});