react-scroll-to-bottom：聊天页面初始渲染时如何固定在底部？

你遇到的问题是组件初始化时会触发平滑滚动过程，而非直接定位在底部，可通过以下调整实现官方示例的效果：

核心调整方案 #

1. 修改初始化滚动行为：将initialScrollBehavior从"auto"改为"instant"，跳过平滑滚动动画，让组件初始化时直接跳转到底部。
2. 移除冗余属性：atEnd和atBottom是组件内部维护的状态属性，无需手动设置初始化值，保留反而可能干扰组件的自动判断逻辑。
3. 确保容器高度约束：给ScrollToBottom容器设置明确的高度，否则组件无法准确计算滚动范围，导致定位失效。

修改后的代码示例 #

import ScrollToBottom from 'react-scroll-to-bottom';
import { useRef, useEffect } from 'react';
// 自定义容器样式适配布局
import './Content.css';

const Content = () => {
  const scrollContainerRef = useRef(null);

  // 兜底方案：组件挂载后强制滚动到底部
  useEffect(() => {
    scrollContainerRef.current?.scrollToBottom();
  }, []);

  return (
  <>
    <ScrollToBottom
      ref={scrollContainerRef}
      checkInterval={17}
      initialScrollBehavior="instant"
      sticky
      mode="bottom"
      className="chat-container"
    >
      {/* 这里渲染聊天消息列表 */}
      <div>Messages</div>
    </ScrollToBottom>
  
    <div>Input Section</div>
  </>
  )
}

export default Content;

配套样式（Content.css） #

.chat-container {
  /* 根据页面实际布局调整高度，例如减去输入栏和顶部导航的高度 */
  height: calc(100vh - 80px);
  overflow-y: hidden;
}

原理说明 #

• initialScrollBehavior="instant" 直接禁用初始化时的平滑滚动，让组件瞬间定位到底部。
• 手动调用scrollToBottom()作为兜底，避免组件内部初始化逻辑延迟导致的定位偏差。
• 明确容器高度是组件正常计算滚动范围的前提，没有高度约束时组件无法正确识别底部位置。

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