How to Disable Auto-Scroll in Gradio TextArea and Keep Output at the Top

Learn how to stop Gradio TextArea from auto-scrolling to the bottom. Use autoscroll=False to keep the view at the top, with a minimal Python example.

Gradio’s TextArea is handy for showing logs, responses, or any generated output. But there’s a catch: when a long string is written into the component, it automatically jumps to the bottom. If you want users to see the beginning of the content after an update, that default auto-scroll behavior gets in the way.

Reproducing the issue

The following minimal example shows a long text being rendered into a TextArea. After clicking the button, the view lands at the end of the content instead of the beginning.

import gradio as gr
def make_text():
    return '\n'.join([f'test{i}' for i in range(50)])  # long output
with gr.Blocks() as app:
    out_box = gr.TextArea(label="Output", lines=10, max_lines=20)
    run_btn = gr.Button("Show Text")
    run_btn.click(fn=make_text, outputs=out_box)
app.launch()

What’s going on

When the TextArea receives content that exceeds its visible height, it auto-scrolls to the bottom. That behavior shows the latest part of the text by default, which can be the opposite of what’s desired if the important context is at the top.

The fix

To keep the view from jumping, disable the auto-scrolling behavior on the TextArea. The component supports a parameter that turns this off.

import gradio as gr
def make_text():
    return '\n'.join([f'test{i}' for i in range(50)])  # long output
with gr.Blocks() as app:
    out_box = gr.TextArea(label="Output", lines=10, max_lines=20, autoscroll=False)
    run_btn = gr.Button("Show Text")
    run_btn.click(fn=make_text, outputs=out_box)
app.launch()

With autoscroll set to False, the TextArea renders the new content and keeps the viewport at the top, so users see the beginning of the output immediately.

Why this matters

In developer tools, dashboards, and ML demos, first lines often carry context, headers, or instructions. Auto-jumping to the end hides that context and forces a manual scroll. Disabling auto-scroll improves readability and reduces friction for users who repeatedly trigger updates.

Takeaways

If a Gradio TextArea jumps to the bottom after updates, it’s because the component auto-scrolls on long content. Set autoscroll to False to prevent that jump and ensure the top of the text remains in view. This small tweak makes log viewers, result panels, and any long-form output more usable.