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.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[kajweb]

any comment

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!