React切换长短Tab时页面滚动跳变问题及平滑滚动方案咨询

我正在开发一个包含两个Tab的React组件：一个是展示数据的Table Tab，另一个是查看表格条目详情的Info Tab。该组件位于页面底部，且Info Tab的高度小于Table Tab，切换Tab时页面长度变化会导致滚动跳变，而非平滑滚动。

请问能否实现页面平滑滚动？若无法实现，是否至少能在渲染变更前执行滚动？

我尝试使用useLayoutEffect在切换前执行滚动，但仅从长Table Tab切换到短Info Tab时有效。

现有代码 #

import React, { useState, useRef, useLayoutEffect } from "react";
import { Button } from "react-bootstrap";
import '../.css'

export default function Example(props) {
    const fields = ["ID", "A count", "B count", "diff"]

    const data = [{ id: 1, aCount: "data", bCount: "data", diff: "difference" },
    { id: 2, aCount: "data", bCount: "data", diff: "difference" },
    { id: 3, aCount: "data", bCount: "data", diff: "difference" },
    { id: 4, aCount: "data", bCount: "data", diff: "difference" },
    { id: 5, aCount: "data", bCount: "data", diff: "difference" },
    { id: 6, aCount: "data", bCount: "data", diff: "difference" },
    { id: 7, aCount: "data", bCount: "data", diff: "difference" },
    { id: 8, aCount: "data", bCount: "data", diff: "difference" },
    { id: 9, aCount: "data", bCount: "data", diff: "difference" },]

    const [isTableVisible, setIsTableVisible] = useState(true)
    const [infoData, setInfoData] = useState(data[0])

    const tabRef = useRef()
    const isMounted = useRef(false);

    useLayoutEffect(() => {
        if (isMounted.current) {
            tabRef.current.scrollIntoView()
        } else {
            isMounted.current = true;
        }
    }, [isTableVisible]);

    function handleTabClick() {
        setIsTableVisible(!isTableVisible)
    }
    function handleViewClick(index) {
        setIsTableVisible(false)
        setInfoData(data[index])
    }

    return (
        <div>
            <div className="ref" id="table" ref={tabRef} />

            {isTableVisible ?
                <div>
                    <span className="tab-active"> Table </span><span className="tab" onClick={handleTabClick}> Info </span>
                </div>
                : <div>
                    <span className="tab" onClick={handleTabClick}> Table </span><span className="tab-active"> Info </span>
                </div>}
                
            {isTableVisible ?
                <div>
                    <table className="data-table">
                        <thead>
                            <tr>
                                {fields.map((field, i) => <th key={field}>{field}</th>)}
                            </tr>
                        </thead>
                        <tbody>
                            {data.map((currData, i) =>
                                <tr key={i}>
                                    <td>{currData.id}
                                        <br />
                                        <Button
                                            variant="btn btn-outline-primary"
                                            onClick={(e => handleViewClick(i))}>
                                            View
                                        </Button>
                                    </td>
                                    <td>
                                        {currData.aCount}
                                    </td>
                                    <td>
                                        {currData.bCount}
                                    </td>
                                    <td >
                                        {currData.diff}
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>

                </div>
                : <div className="info-section">
                        Box for Data    
                </div>
            }
        </div>
    )
}

解决方案 #

1. 开启scrollIntoView的平滑模式 #

scrollIntoView本身支持平滑滚动，添加配置参数即可让切换时的滚动更自然，同时解决反向切换无效的问题：

修改useLayoutEffect：

useLayoutEffect(() => {
  if (isMounted.current) {
    tabRef.current.scrollIntoView({
      behavior: 'smooth', // 开启平滑滚动
      block: 'start' // 滚动到组件顶部位置，可选值：start/center/end/nearest
    });
  } else {
    isMounted.current = true;
  }
}, [isTableVisible]);

2. 记录滚动位置，精准恢复（针对切回长Tab的情况） #

从Info切回Table时，页面高度突然增加，单纯的scrollIntoView可能因为DOM未完全渲染导致效果差。可以在切换前记录当前滚动位置，切换后再恢复：

• 添加滚动位置ref：

const scrollPositionRef = useRef(0);

• 修改切换函数，记录位置：

function handleTabClick() {
  scrollPositionRef.current = window.scrollY;
  setIsTableVisible(!isTableVisible);
}

function handleViewClick(index) {
  scrollPositionRef.current = window.scrollY;
  setIsTableVisible(false);
  setInfoData(data[index]);
}

• 更新useLayoutEffect，分方向处理：

useLayoutEffect(() => {
  if (isMounted.current) {
    if (!isTableVisible) {
      // 切到短Tab，滚动到组件顶部
      tabRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      // 切回长Tab，先恢复之前的滚动位置，再确保组件可见
      window.scrollTo({
        top: scrollPositionRef.current,
        behavior: 'smooth'
      });
      // 延时确保DOM渲染完成后再微调（可选）
      setTimeout(() => {
        tabRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }, 100);
    }
  } else {
    isMounted.current = true;
  }
}, [isTableVisible]);

3. 固定组件高度（彻底避免滚动跳变） #

如果平滑滚动还是达不到预期，最简单的办法是让组件始终占据足够的高度（等于Table Tab的高度），这样页面总长度不会变化，自然不会有滚动跳变：

在CSS中添加：

.tab-container {
  min-height: 600px; /* 替换成你Table Tab的实际高度 */
}

然后给组件外层div加上这个类：

return (
  <div className="tab-container">
    {/* 原组件内容 */}
  </div>
);

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