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

Question

this is what I am trying to do

1. My main page has 4 buttons
2. On click of each button, the modal should open and the content for that section should be at the top. For example, click "All Nutrients" and the modal should open where the content at the top should be the Box that contains NutrientFilterOptions .

My attempt is available at https://codesandbox.io/s/modest-edison-wz8qr?file=/src/App.tsx

What happens now?

1. When I click on "All Nutrients", modal opens but the Nutrient section is not scrolled to the top.

Note: At this time, the code is only connected using ref for Nutrients.

Any help in educating me how I can achieve my goal is greatly appreciated.

Thank you

Answer 1

I have never seen chakra-ui so please excuse me for not completely solving this problem

I managed to get the desired list to scroll into view with this modification to NutrientFilterOptions.tsx

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

What I am doing is giving the element an id instead of using useRef , although useRef may be ideal in this situation.

I am using useEffect because I want the code to execute after the component renders.

After the component renders I have vanilla js to first check that the element exists (isShown) then I scroll it into view if it does exist.

I would like to add that this does not check how the list was initially shown. You would need a state that keeps track of what opened the options menu, and only scroll if that the source was correct. I would use prop drilling or redux to handle the source of options opening.

hopefully that helps!