How to set scrollbar to bottom for ScrollArea

[hasnainadil]

I'm a bit new to react and nextjs development. I'm using nextjs14 for a dummy chatapp. I was trying to set the scrollbar to bottom when I enter the page so I tried this

useEffect(() => {
// Scroll to bottom of the scroll area
if (scrollAreaRef.current) {
console.log("scrolling to bottom");
scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
console.log(scrollAreaRef.current.scrollHeight); //I'm getting 537 here
console.log(scrollAreaRef.current.scrollTop); //I'm still getting 0 here height can't be set
}
}, [chatMessages, openedChat]);

{chatMessages.map((message, index) => (

{message}

))}

this doesn't work at all but usual div works just fine
regular div code:

{chatMessages.map((message, index) => (

{message}

))}

this code above works fine with the code in useEffect I also tired to use id to get the scroll area but not working. How can I set the scrolltop to bottom of the ScrollArea with shadcn ScrollArea component. Thanks in advance.

[abhayclasher]

hey, for ScrollArea manual scrollTop is a pain. easiest way is to just put a dummy div at the very bottom of your message list and use a ref on it.

const bottomRef = useRef<HTMLDivElement>(null)

useEffect(() => {
  bottomRef.current?.scrollIntoView({ behavior: "smooth" })
}, [chatMessages])

// ... inside your ScrollArea
{chatMessages.map(...)}
<div ref={bottomRef} />

this way it always jumps to the end whenever chatMessages updates. way cleaner 👍

[Manavarya09]

The issue is that ScrollArea wraps your content in an internal viewport,
so setting scrollTop on the outer ref won't work.

Use a bottom anchor ref instead:

```tsx
const bottomRef = useRef(null);

useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);

return (

{messages.map((msg) => (

{msg.content}

))}

);
```

This works because scrollIntoView() navigates the nearest scrollable
ancestor regardless of component wrapping. Much cleaner than manual
scroll position calculation.