How can I use an auto scroll to the bottom of the page?

Using Streamlit
7

Thanks a lot for the swift reply and the suggestion regarding the re-execution of Javascript in Streamlit. I implemented the recommended approach of using a dummy variable to force a change and hence a re-run of the script. The dummy variable increments properly, so there is a change on each page load. However, the desired effect - auto-scrolling to the bottom of a chat - isn’t happening.

Here is the JavaScript code snippet I’m using:

st.markdown(
    """
    <script>
    var element = document.getElementById("end-of-chat");
    element.scrollIntoView({behavior: "smooth"});
    </script>
    """,
    unsafe_allow_html=True,
)

And here’s how I increment the dummy variable in Python:

st.session_state['dummy_counter'] += 1

I insert a unique <div id="end-of-chat"></div> after each chat message and intend to use this as an anchor to scroll down to. The dummy variable change is triggering the rerun correctly, but it seems the Javascript isn’t executing or having an effect each time.

Despite these measures, after a certain number of messages, new messages aren’t scrolled into view and are instead off-screen.

Is there something in the way Streamlit handles Javascript that could be preventing the desired scrolling behavior?