React组件加载时滚动到元素底部的代码问题排查

我来帮你梳理下这段代码里的问题，以及对应的修复方案哈～

问题1：用错了滚动方法 #

你现在用的scrollIntoView()是用来把当前元素本身滚动到浏览器视口的可见区域里，但你的需求是让容器（那个带overflow-scroll的div）内部的内容滚动到底部，这完全是两个不同的操作场景哦。

问题2：useEffect的依赖数组不合理 #

scrollPage是通过useRef创建的，这个ref对象本身在组件生命周期里是不会变化的（变化的只是它的.current属性），所以把它放进useEffect的依赖数组里没有任何意义，反而可能导致滚动逻辑没有在正确的时机触发。

修复方案 #

我给你调整了代码，主要做了这几个改动：

1. 换成useLayoutEffect（相比useEffect，它会在DOM更新完成后同步执行，能确保滚动逻辑在内容渲染好后立刻触发）
2. 直接操作容器的scrollTop属性，通过scrollHeight - clientHeight计算出滚动到底部需要的距离
3. 把依赖数组改成空数组，确保只在组件挂载时执行一次滚动逻辑

修正后的代码：

"use client";

import { useLayoutEffect, useRef } from "react";

export default function TestPage() {
  const scrollPage = useRef<HTMLDivElement>(null);
  
  useLayoutEffect(() => {
    if (scrollPage.current) {
      const container = scrollPage.current;
      // 计算并设置滚动位置到底部
      container.scrollTop = container.scrollHeight - container.clientHeight;
    }
  }, []);

  return (
    <div className="h-[80vh] overflow-scroll" ref={scrollPage}>
      <div className="h-[300vh]"></div>
      <div>bottom</div>
    </div>
  );
}

额外小提示 #

如果你非要用scrollIntoView的方式实现，那可以给底部的<div>bottom</div>单独加一个ref，然后调用这个ref的scrollIntoView()方法，不过这种方式不如直接操作容器scrollTop高效直接，示例代码大概是这样：

"use client";

import { useLayoutEffect, useRef } from "react";

export default function TestPage() {
  const bottomElement = useRef<HTMLDivElement>(null);
  
  useLayoutEffect(() => {
    bottomElement.current?.scrollIntoView({ behavior: "smooth", block: "end" });
  }, []);

  return (
    <div className="h-[80vh] overflow-scroll">
      <div className="h-[300vh]"></div>
      <div ref={bottomElement}>bottom</div>
    </div>
  );
}

备注：内容来源于stack exchange，提问作者Dhuruv Bansal