如何在 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 來處理選項打開的來源。

希望有幫助！