React TypeScript页面加载时指定区域滚动至顶部实现方法咨询

要实现仅目标区域滚动到顶部、页面主体保持不动的需求，核心是通过获取目标区域的DOM引用，在组件挂载完成后直接操作其滚动属性。以下是两种常用实现方式：

方法一：函数组件 + useRef + useEffect #

这是当前React项目的主流写法，利用Hook获取DOM元素并在组件首次挂载时执行滚动操作：

import React, { useRef, useEffect } from 'react';

const TargetScrollDemo = () => {
  // 定义目标区域的Ref，根据实际元素类型调整泛型（比如ul用HTMLUListElement）
  const scrollableAreaRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 组件挂载完成后，检查Ref是否指向有效DOM
    if (scrollableAreaRef.current) {
      // 方式1：直接设置scrollTop为0（无平滑效果）
      scrollableAreaRef.current.scrollTop = 0;

      // 方式2：使用scrollTo方法（支持平滑滚动，可选）
      // scrollableAreaRef.current.scrollTo({
      //   top: 0,
      //   behavior: 'auto' // 不需要平滑用auto，需要则用smooth
      // });
    }
  }, []); // 空依赖数组确保仅在组件首次挂载时执行

  return (
    <div className="page-container">
      {/* 页面其他内容，不会被滚动 */}
      <h1>页面主体内容</h1>
      
      {/* 目标可滚动区域：必须设置固定高度 + overflow-y属性 */}
      <div
        ref={scrollableAreaRef}
        style={{
          height: '400px',
          overflowY: 'auto',
          border: '1px solid #eee',
          padding: '10px'
        }}
      >
        {/* 长内容示例 */}
        {Array.from({ length: 50 }).map((_, index) => (
          <p key={index}>滚动区域内容 {index + 1}</p>
        ))}
      </div>
    </div>
  );
};

export default TargetScrollDemo;

关键注意点： #

• 目标区域必须设置固定高度和overflow-y: auto/scroll，否则无法生成滚动条，scrollTop属性也不会生效。
• 空依赖数组确保滚动逻辑仅在组件首次加载时执行，避免重复触发。
• 根据目标区域的实际DOM类型调整Ref的泛型，保证TypeScript类型校验通过。

方法二：类组件实现（兼容旧项目） #

如果项目仍使用类组件，可以通过createRef获取DOM引用，在componentDidMount生命周期中执行滚动：

import React, { Component, createRef } from 'react';

class TargetScrollClassDemo extends Component {
  // 定义Ref类型
  private scrollableAreaRef = createRef<HTMLDivElement>();

  componentDidMount() {
    if (this.scrollableAreaRef.current) {
      this.scrollableAreaRef.current.scrollTop = 0;
    }
  }

  render() {
    return (
      <div className="page-container">
        <h1>页面主体内容</h1>
        <div
          ref={this.scrollableAreaRef}
          style={{
            height: '400px',
            overflowY: 'auto',
            border: '1px solid #eee',
            padding: '10px'
          }}
        >
          {Array.from({ length: 50 }).map((_, index) => (
            <p key={index}>滚动区域内容 {index + 1}</p>
          ))}
        </div>
      </div>
    );
  }
}

export default TargetScrollClassDemo;

额外说明 #

如果需要在特定场景（比如路由切换、数据加载完成）再次触发滚动，只需调整useEffect的依赖数组（加入触发条件），或者将滚动逻辑封装成独立函数按需调用即可。

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