When `ScrollArea` appears, how do I make it automatically scroll to the bottom?

[oyal]

Monitoring data changes. Let the last element in the ScrollArea : scrollIntoView

[alexlai18]

Monitoring data changes. Let the last element in the ScrollArea : scrollIntoView

For me, inside the CardContent component, the scrollarea position will change. Do you know how to keep the position within the parent div boxed in?

[aadityam16]

Facing the same issue, did you find any solution till now?

[RickyRAV]

wondering the same here

[Zombrooc]

I don't know if my solution will work for this case. But i need to automatically scroll to the bottom when a new dynamic form is created.

So i Try this:

create a useRef var:

const cardRef = useRef(null);

Add this ref only in the last item

{fields.map((child, index, row) => (
  <Card
    key={child.id}
    className="mb-4 relative"
    ref={index + 1 === row.length ? cardRef : null} //Verify if the card is the last one.
  >
    {/* My code */}
  </Card>
))}

finally, i use useEffect to watch data changes on my array. If the array changes the useEffect will see and execute the scroll

useEffect(() => {
    if (fields.length > 0) {
      cardRef.current.scrollIntoView({ behavior: "smooth" }); //Use scrollIntoView to automatically scroll to my ref
    }
  }, [fields.length]);

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[imtns]

Anyone know how to scroll to bottom in scrollarea ?