当页面长度发生变化时，有没有办法平滑地向上或向下滚动而不是跳跃？

Question

我正在尝试创建一个组件，其中有两个选项卡，一个是显示数据的表格，另一个让用户查看有关表格中特定条目的更深入的信息。我遇到的问题是该组件位于页面底部，并且信息选项卡比表格选项卡短，因此当我在它们之间切换时，它会缩短页面并跳转而不是平滑滚动。

有没有办法让页面滚动而不是像这样跳转，如果不可能，至少有办法让它在渲染更改之前滚动吗？

我尝试在切换之前使用 useLayoutEffect 进行滚动，但它仅在从较大的表格选项卡转到较短的信息选项卡时才有效。这是我到目前为止所拥有的：

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>
    )
}

Answer 1

嗯，是的，如果你使用参数来指定它......

element.scrollIntoView({behavior:"smooth", block:"end", inline:"nearest"});

还有带有参数的scroll()函数，以防您需要......

document.body.scroll({top:0, behavior:"smooth"});