How To Jump To Bottom Of Scroll Area

[Existential-Critic]

I am trying to use a Scroll Area as a chat log, and I want to make a function so when a new message is added to the log, it jumps the Scroll Area to the bottom. Is there a function to do that, and if not, how would I go about setting one up?

[pablotanner]

If the scroll area has a scroll bar, you can use the following guide

https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

[vishalvibes]

I did find a solution:

1️⃣ I added a ref to the div which was the children of ScrollBar instead of ScrollBar and it worked

2️⃣ Then I used the scrollIntoView(false) function

Hope this helps.

[kamiljaneczek]

works like charm. thank you :)

[dankags]

it is a really good article and it works fine the issue on my code was i did not know that you should put scrollintoview boolean parameter to false since by default is true and it keeps it at the top.

[MijailVillegas]

I did find a solution:

1️⃣ I added a ref to the div which was the children of ScrollBar instead of ScrollBar and it worked

2️⃣ Then I used the scrollIntoView(false) function Hope this helps.

Thank you so much

[CBell045]

You can also extend the scroll area as described here: radix-ui/primitives#990 (comment)

[edlucas]

I have a version where I scroll the last chat message into view using this utility function that takes the wrapper as a parameter:

export const scrollToBottom = (
  container: HTMLElement | null,
  smooth = false,
) => {
  if (container?.children.length) {
    const lastElement = container?.lastChild as HTMLElement

    lastElement?.scrollIntoView({
      behavior: smooth ? 'smooth' : 'auto',
      block: 'end',
      inline: 'nearest',
    })
  }
}

As in the previous example, I'm getting using a div within <ScrollArea>, giving it a ref and calling the function in a useEffect().

[szmazhr]

Don't know if a over engineered or not. but here is my solution. Which keeps it stick to bottom even when new element added.

https://blog.shahzar.in/how-to-add-stick-to-bottom-features-to-shadcn-scrollarea-for-better-chat-interfaces