如何在 Chakra Modal 中将部分滚动到顶部？答案

【问题标题】：How to scroll a section to the top in Chakra Modal?如何在 Chakra Modal 中将部分滚动到顶部？
【发布时间】：2021-10-30 00:15:31
【问题描述】：

这就是我想要做的事情

我的主页有 4 个按钮
单击每个按钮时，模式应打开，该部分的内容应位于顶部。例如，单击“所有营养素”，模式应该会打开，其中顶部的内容应该是包含NutrientFilterOptions 的Box。

我的尝试可以在https://codesandbox.io/s/modest-edison-wz8qr?file=/src/App.tsx 获得

现在会发生什么？

当我点击“所有营养素”时，模式会打开，但“营养素”部分没有滚动到顶部。

注意：此时，代码仅使用ref 连接营养。

非常感谢任何帮助教育我如何实现目标的帮助。

谢谢

【问题讨论】：

标签： javascript reactjs chakra-ui

【解决方案1】：

我从未见过 chakra-ui 所以请原谅我没有完全解决这个问题

通过对 NutrientFilterOptions.tsx 的修改，我设法让所需的列表滚动到视图中

export const NutrientFilterOptions = () => {
    useEffect(() => {
        const ele = document.querySelector("#myNutFilter");
        if (ele) ele.scrollIntoView();
    }, []);
    return (
        <div id="myNutFilter">

我正在做的是给元素一个 id 而不是使用useRef，尽管 useRef 在这种情况下可能是理想的。

我使用useEffect 是因为我希望代码在组件渲染后执行。

组件渲染后，我有 vanilla js 首先检查元素是否存在（isShown），然后如果它存在，我将其滚动到视图中。

我想补充一点，这不会检查列表最初的显示方式。您需要一个状态来跟踪打开选项菜单的内容，并且仅在源正确时才滚动。我会使用 prop Drill 或 redux 来处理选项打开的来源。

希望对您有所帮助！

【讨论】：

我还必须从 react 中导入 useEffect，不过我相信你会想出来的。
嘿，我刚看到这个，你有试过的codeandbox链接吗？
我为您准备了 a link，但只有那 3/4 行代码对更改很重要。