How can i scroll up - inner HTML component

šŸ”’ Gradio
1

I made RadioButton component that make output to HTML components.
in my project, RadioButtonā€™s change_function loads html codes and push it to HTML components.

I want to scroll up the inner HTML components when RadioButtonā€™s change-function called.
in chrome when i click other button in Radio button, html components change successfully but they remember the scroll position. they should be scolled to top.

i dont know about frontend web programming.

I tried to make html button to scroll up with css alternatl, this html button works but it scroll up entire page, not inner HTML components pages.

should i render or update HTML components or something? help please

+) I write codes inner HTML, css like ā€˜#box {overflow: auto}ā€™

2

hi @abcnew,

can you share a Space example? Iā€™d be happy to help. You might need to target a child element on the box to achieve the scroll and might need to use ā€˜#box {overflow-y: scroll !important } for force that style

3

hi @radames thank you for your help!

def render(clicked_button):
    print(clicked_button)

    return ("<div>" + clicked_button * 10 + "</div>" + "<p> newline </p]>") * 100

with gr.Blocks(css="#box { height: 500px; overflow-y: scroll !important}") as demo:
    with gr.Row():
        with gr.Column():
            radio_button = gr.Radio(["a", "b", "c"])
        with gr.Column():
            html_output = gr.HTML(elem_id="box")

    radio_button.change(
        fn=render,
        inputs=radio_button,
        outputs=html_output
    )

demo.launch()

this is my sample code.
i tried your solution but there are still some problems yet

when i click radio button ā€œaā€, then html output should be rendered.
and then i scrolled down html_output, and i choose another radio button ā€œbā€,
new rendered html output still remember(?) the scroll position.

new html output should be scolled up to top as soon as i choose another button.
could you please check my sample code? :melting_face: