Scrollbar Locking to Top of Page

[JamesDConley]

TLDR; Is there a way to allow the user to control the scrollbar while repeatedly updating a markdown element? Or lock it to the bottom instead of the top?

---

Hi! I'm working on a little chat style app that gives user access to some different tools through slash commands.

Some of these stream text, and I am able to stream the text (markdown) to the display above the input box as such

 async def on_button_pressed(self, event : Button.Pressed) -> None:
      text = self.query_one(TextArea).text
      md = self.query_one(Markdown)
      for item in self.msg_handler.run_query(text):
          await md.update(str(item))

The issue I am running into is that when the text gets larger than the page and new text is generated the scrollbar locks at the top of the text. This means new text can't be seen and I am also prevented from scrolling down to see it. This unfortunately defeats the usefulness of streaming the text.

I'd love to be able to do one of the following

• Set the scroll to lock at the bottom so newly generated text can be viewed
• Maintain the users control of the scrollbar so they can choose whether to watch the generated text or look elsewhere in the history.

I'm new to textualize, but I spent some time looking through the docs/discussions/stackoverflow and was unable to find anything related to this except for the auto_scroll which appears to be for logs/hasn't worked for the markdown, unless I am doing something wrong.

If you've read this far, ty!

[davep]

You probably want to place the Markdown inside a VerticalScroll and then, after each update of the Markdown (which you should await, which you are doing now), call the scroll_end method of the VerticalScroll.

Seems you're building something very similar to something I've been playing with in terms of layout and flow (in this case a simple LLM client) and you can see I'm essentially doing that here.

[JamesDConley]

this worked perfectly, thank you!

[darrenburns]

This code might also help. It implements the "sticky" logic you're looking for, where the chat will keep scrolling to the bottom, but if the user scrolls away, it'll stop.

[JamesDConley]

Thanks! This looks a little more tricky but having that scrollable would be super handy, giving it a go :)

[JamesDConley]

Oh I didn't realize the self.chat_container was a vertical scroll just like the previous answer. Got it added and it also worked really nicely. Thanks!

[JamesDConley]

Thank you both! Excited to try out these tonight after work.