Bug: Does React automatically handle scrolling for me? about react

[umang-bhatt]

@kajweb
Try this to achieve the same behaviour as expected in vanilla script

import "../App.css";
import { useRef, useEffect, useState } from "react";

export default function Scroller() {
    const [data, setData] = useState("");

    const ref = useRef(null);
    const [scrollPosition, setScrollPosition] = useState(0);

    useEffect(() => {
        ref.current.scrollTop = scrollPosition;
    }, [scrollPosition]);


    const changeText = (type) => {
        setData(
            [
                ...Array(
                    {
                        S: 1,
                        M: 1000,
                        L: 5000,
                        LP: 5000
                    }[type]
                )
            ]
                .map((i) => type)
                .join(" ")
        );
        setScrollPosition(ref.current.scrollTop);
    }

    return (
        <div>
            <div className="flex items-center justify-center">
                <div
                    style={{
                        height: 600,
                        width: 300,
                        border: "1px solid #ccc",
                        overflow: "auto"
                    }}
                    ref={ref}
                >
                    {data}
                </div>
            </div>

            <div className="flex gap-2">
                {/* <button onClick={() => changeText("S")}>S</button> */}
                <button onClick={() => changeText("M")}>M</button>
                <button onClick={() => changeText("L")}>L</button>
                <button onClick={() => changeText("LP")}>LP</button>
            </div>
        </div>
    );
}

Hope this helps !

[kajweb]

It worked.