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

Question

这就是我想要做的

1. 我的主页有 4 个按钮
2. 单击每个按钮时，模态应该打开并且该部分的内容应该在顶部。 例如，单击“所有营养素”，模态应该打开，顶部的内容应该是包含NutrientFilterOptions的Box 。

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

现在会发生什么？

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

注意：此时代码仅使用ref for Nutrients 连接。

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

谢谢

Answer 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），然后将其滚动到视图中（如果确实存在）。

我想补充一点，这不会检查列表最初是如何显示的。 您需要一个状态来跟踪打开选项菜单的内容，并且只有在来源正确时才滚动。 我会使用道具钻孔或 redux 来处理选项打开的来源。

希望有帮助！