在聊天机器人、客服系统甚至学习助手里“Zui新消息永远在视线底部”几乎是标配。可Ru果用户想翻kan历史记录，这种“一味向下”的行为就会让人抓狂。本文将从原理讲起，逐层拆解「自动滚动」与「用户手动滚动」的冲突处理，并提供 React Hook 与 Vue 3 两套实战代码。

① 流式输出的需求大模型往往采用 SSE / WebSocket 分块返回，每收到一段文字就渲染到页面上。Ru果不把容器拉到底部，用户只Neng盯着空白区域等答案出现，体验极差。

② 阅读历史的需求当用户想回顾前面的对话时若页面仍强行跳到底部，会不断打断他的阅读节奏。

③ 多端统一的挑战手机端是触摸滑动，PC 端是鼠标滚轮，两者的事件名称和触发时机dou有细微差别，需要统一封装。

MutationObserver Neng实时捕获 DOM 树的变化，正好Ke以用来监听聊天消息列表的新增。当检测到新节点后只要满足「当前处于自动滚动模式」就执行一次 scrollTo。

let observer: MutationObserver;
const messagesContainer:any = document.getElementById;
observer = new MutationObserver => {
    // 每次有新消息加入，dou尝试把容器拉到底部
    messagesContainer.scrollTo({
        top: messagesContainer.scrollHeight,
        behavior: 'smooth',
    });
});

当用户主动滑动时我们需要暂停自动滚动，以免两套逻辑相互抢占；滑动结束且Yi回到底部时 开启观察器。

const startObserverScroll =  => {
    observer && observer.observe(messagesContainer, {
        childList: true,
        subtree   : true,
        characterData: true,
        attributes   : true,
    });
};
const stopObserverScroll =  => {
    observer && observer.disconnect;
};
// 初始化
startObserverScroll;

下面这段代码演示了在 React 环境下用一个状态常量区分「自动」与「手动」两种模式，并通过事件监听完成切换。

import { useEffect } from 'react';
export const useChatContainer =  => {
    const AUTO_SCROLLING = 'auto';
    const USER_SCROLLING = 'user';
    let SCROLLING_MODE: typeof AUTO_SCROLLING | typeof USER_SCROLLING = AUTO_SCROLLING;
    const messagesContainer:any = document.getElementById;
    const observer = new MutationObserver => {
        // 只在自动模式下才执行滚动
        if  {
            messagesContainer.scrollTo({
                top   : messagesContainer.scrollHeight,
                behavior : pageHasInit ? 'smooth' : 'auto',
            });
        }
    });
    /** 判断是否Yi经抵达底部 */
    const updateScrollState =  => {
        const {scrollHeight, clientHeight, scrollTop} = messagesContainer || {};
        if  { // 留点容差
            SCROLLING_MODE = AUTO_SCROLLING;
            startObserverScroll;
        }
    };
    /** 用户正在滑动时触发 */
    const handleScroll =  => {
        if  updateScrollState;
    };
    const handleTouchStart =  => {
        stopObserverScroll;               // 暂停观察
        SCROLLING_MODE = USER_SCROLLING;   // 标记为手动模式
    };
    const handleTouchEnd   =  => updateScrollState;
    /** PC 端滚轮的去抖实现 */
    let wheelTimer:any;
    const handleWheelEvent =  => {
        handleTouchStart;
        wheelTimer && clearTimeout;
        wheelTimer = setTimeout => updateScrollState, 200);
    };
    const startObserverScroll =  => {
        observer && observer.observe(messagesContainer,{
            childList:true,
            subtree:true,
            characterData:true,
            attributes:true,
        });
    };
    const stopObserverScroll =  => observer && observer.disconnect;
    const startEventListener =  => {
        startObserverScroll;
        messagesContainer.addEventListener;
        messagesContainer.addEventListener;
        messagesContainer.addEventListener;
        messagesContainer.addEventListener;
    };
    const removeEventListener =  => {
        stopObserverScroll;
        messagesContainer.removeEventListener;
        messagesContainer.removeEventListener;
        messagesContainer.removeEventListener;
        messagesContainer.removeEventListener;
    };
    useEffect=>{
        startEventListener;
        return=>removeEventListener;
    },);
};

Vue 开发者Ke以把同样的思路写进一个 composable，借助 ref 拿到容器节点，再用 .scrollIntoView 或者直接操作 .scrollTop 完成平滑滚动。

import { ref, onMounted, onBeforeUnmount } from 'vue';
export function useAutoScroll {
  const mode      = ref; // auto | user
  let observer;
  const container = document.getElementById;
  const startObserve =  => {
      observer = new MutationObserver=>{
          if  {
              container.scrollTo;
          }
      });
      observer.observe(container,{
          childList:true,
          subtree:true,
          characterData:true,
          attributes:true
      });
  };
  const stopObserve   = =>observer && observer.disconnect;
  const checkBottom   = =>{
      const {scrollHeight,clientHeight,scrollTop}=container;
      if {
          mode.value='auto';
          startObserve;
      }
  };
  // 手指/鼠标事件
  const onTouchStart==>{stopObserve;mode.value='user';};
  const onTouchEnd  ==>checkBottom;
  const onWheel     ==>{onTouchStart;clearTimeout;wheelTimer=setTimeout;};
  onMounted=>{
      startObserve;
      container.addEventListener;
      container.addEventListener;
      container.addEventListener;
      container.addEventListener;
  });
  onBeforeUnmount=>{
      stopObserve;
      container.removeEventListener;
      container.removeEventListener;
      container.removeEventListener;
      container.removeEventListener;
  });
}

防抖或节流：Ru果后端每秒推送多条碎片，用 “requestAnimationFrame” 或 lodash 的 throttle 限制 scroll 调用频率，可避免卡顿。

容错阈值：判断是否Yi到底部时留出几像素（如上例中的 -5)，防止因为小数精度导致误判。

资源释放：组件卸载或路由切换时一定要调用 .disconnect/.removeEventListener; 否则旧的观察器会继续运行，引发内存泄漏。

兼容性：IE 不支持 MutationObserver，可考虑回退到 setInterval 检测，但现代浏览器基本douYi覆盖。

统一入口：无论是 React Hook、Vue composable，还是原生函数，dou建议把「启动/停止观察」封装成独立方法，便于业务层调用。

#自动模式默认开启：页面首次渲染后立即启动监听，让首条 AI 回答自然落在视野底部。

#手动模式优先：只要检测到用户有任何滚动动作，就立刻切换为手动状态并关闭观察器；直到 回到底部才恢复自动。

#平滑动画可选：Smooth 滚动虽好，但在低性Neng设备上可Neng出现卡顿，可通过判断 `navigator.hardwareConcurrency` 动态决定使用 `auto` 或 `smooth`。

#日志调试：`console.debug` Neng帮助定位奇怪的抢占现象，在正式上线前记得关闭。

A​I 对话界面kan似只是一堆文字堆叠，却隐藏着大量细腻的人机交互设计。通过 MutationObserver 捕获新增消息，用状态机区分「机器驱动力」和「人类操作」，我们既保证了答案即时呈现，又尊重了用户翻阅历史的自由。把本文提供的代码块粘进去，再配合一点 UI 动画，你的聊天产品马上就Neng拥有那种“我说完了你Yi经kan到”的顺畅感受。祝编码愉快！ 🎉