前端滚动条触底事件

滚动条触底判断

界面结构：

<a-scrollbar id="scrollableElement" ref="chatMain">
      <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();
});

滚动条定位到底部

设置滚动条的位置为当前元素的高度即可让滚动条触底。

scrollBottom() {
    let chatHistory = this.$refs.chatMain;
    // 设置滚动条的位置
    chatHistory.scrollTop = chatHistory.scrollHeight;
},

滚动条触顶后回到正确位置

关键在于保存触顶加载之前的元素总高度，在触顶加载之后设置滚动条的位置：当前的元素总高度 - 加载之前的元素总高度 = 正确的位置。

keepPosition() {
    let chatHistory = this.$refs.chatMain;
    this.$nextTick(() => {
        // 设置滚动条位置为触顶加载前的元素高度
        chatHistory.scrollTop = chatHistory.scrollHeight - this.elementHeight;
    });
},