Kevin Powell - Community•3y ago

Scroll like in ChatGPT

I developed a ChatGPT-like app with React and Nextjs, I need to scroll while streaming the output, but couldn't find the logic behind it! anyone has an idea?

9 Replies

Jochem•3y ago

every update, scroll the text container all the way to the bottom, the text will automatically fill it more and more and scroll it upwards

AliOP•3y ago

will not create shaking exp on every small update that doesn't require a scroll?

Jochem•3y ago

as long as you keep it locked to the bottom, it shouldn't shake

AliOP•3y ago

here is the code I used

      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: "smooth",
      });

      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: "smooth",
      });

it runs at every update! I am not sure if that what meant!

vince•3y ago

~~I think Jochem might have meant, instead of using window.scrollTo use element.scrollTo where element is the chat container maybe?~~

Jochem•3y ago

I think it's the smooth behavior that's causing that it'll initiate a scroll from the current position to the bottom at every update, but if it's scrolling smoothly, it won't be at the bottom yet from the previous one if you really need the smooth scrolling, you'll have to only scroll if you detect that the height of the container changed

AliOP•3y ago

But now I ran into another issue, that it prevents me from scrolling to the top!

Jochem•3y ago

then you'll have to detect whether the user is trying to scroll and then not update again until the user manually scrolls down again

Gaming

Programming

Scroll like in ChatGPT

Did you find this page helpful?