React.js中实现元素自动滚动到底部：scrollTop始终为0的问题

核心原因 #

scrollTop始终为0的根本问题是你绑定ref的div没有设置固定高度和滚动属性。当容器高度随内容自动撑开时，scrollHeight等于容器的可见高度（clientHeight），此时设置scrollTop为scrollHeight不会产生任何滚动效果，控制台自然输出0。

解决方案 #

1. 添加滚动容器样式 #

在Logs.module.css中给日志容器添加固定高度和滚动属性：

/* Logs.module.css */
.logs-container {
  /* 设置固定高度，根据你的页面需求调整数值 */
  height: 300px;
  /* 开启垂直滚动 */
  overflow-y: auto;
  /* 可选：添加内边距优化视觉效果 */
  padding: 0.5rem;
}

2. 修改Logs组件代码 #

将样式应用到ref绑定的div，并优化滚动逻辑确保DOM更新后执行：

// Logs.jsx
import { useEffect, useRef } from "react";
import Container from "./UI/Container";
import styles from "./Logs.module.css";

const Logs = ({ logs }) => {
  const logsRef = useRef(null);

  useEffect(() => {
    if (!logsRef.current) return;
    
    // 用requestAnimationFrame确保滚动操作在DOM重绘后执行
    requestAnimationFrame(() => {
      logsRef.current.scrollTop = logsRef.current.scrollHeight;
      console.log(logsRef.current.scrollTop);
    });
  }, [logs]);

  return (
    <Container className={`${styles.logs} ${styles.container}`}>
      <div ref={logsRef} className={styles['logs-container']}>
        {logs.map((log, index) => (
          <p key={index}>{log}</p>
        ))}
      </div>
    </Container>
  );
};
export default Logs;

3. 额外检查点 #

• 确认Container组件没有设置overflow: hidden等会阻止内部滚动的样式；
• 如果日志内容更新频率极高，可以考虑使用useLayoutEffect替代useEffect，确保滚动在DOM更新前就完成计算，但前提是样式已经正确设置。

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