Vue3聊天应用中如何监听滚动事件以关闭自动滚动？

核心逻辑是仅当用户处于消息列表底部时，新消息到来才触发自动滚动；若用户向上滚动查看历史，则暂停自动滚动，直到用户再次回到底部。

实现步骤 #

1. 添加状态变量控制自动滚动
   在组件的setup中定义响应式变量，标记是否需要触发自动滚动：

const shouldAutoScroll = ref(true);

2. 监听滚动事件，动态更新状态
   通过onMounted给聊天容器绑定滚动监听，判断用户是否处于底部区域，实时更新shouldAutoScroll的值：

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  const container = chatContainer.value;
  if (!container) return;

  const handleScroll = () => {
    // 10px阈值允许用户轻微离开底部仍触发滚动，可按需调整数值
    const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 10;
    shouldAutoScroll.value = isAtBottom;
  };

  container.addEventListener('scroll', handleScroll);
  
  // 组件卸载时移除监听，避免内存泄漏
  onUnmounted(() => {
    container.removeEventListener('scroll', handleScroll);
  });
});

3. 修改自动滚动触发逻辑
   更新原有的watchEffect，仅在shouldAutoScroll为true时执行滚动操作：

watchEffect(() => {
  if (messages.value.length && shouldAutoScroll.value) {
    chatContainer.value.scrollIntoView({
      behavior: "smooth",
      block: "end"
    });
  }
}, { flush: "post" });

效果说明 #

• 用户停留在消息底部时，新消息会自动滚动到最新内容；
• 用户向上滚动查看历史消息时，自动滚动功能暂停，不会强制拉回底部；
• 当用户再次滚动回底部区域，自动滚动功能自动恢复。

内容的提问来源于stack exchange，提问作者redshift