Kevin Powell - Community•16mo 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•16mo 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

Ali•16mo ago

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

Jochem•16mo ago

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

Ali•16mo 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•16mo ago

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

Jochem•16mo 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

Ali•16mo ago

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

Jochem•16mo 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