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

🎈 Using Streamlit
1

Hi, I 've seen default scroll responses to specific areas of the code, but I still having a doubt. I’m building an app that sends messages to the screen and I want to know if there is any way to make the page does scroll to the bottom when the size of the messages are bigger than the size of the screen by default.

Thanks you so much.

1 Like
2

I also want to know this. I have tried almost all methods that cannot achieve automatic scrolling to the bottom. The only way to scroll to the bottom is to set an anchor point at the bottom, and then click the link to jump to scroll the page to the bottom, but this is not automatic

3

Here is a related response about scrolling to the bottom of a text area:

If you want to scroll to the bottom the page, here’s a modification of my previous answer:

import streamlit as st

if 'chat' not in st.session_state:
    st.session_state.chat = "A: Hello"

def submit():
    st.session_state.chat += f'  \nB: {st.session_state.B}'
    st.session_state.chat += '  \nA: Some response.'
    # Clear the text input widget for convenience
    st.session_state.B = ''

st.write(st.session_state.chat)

st.text_input('B\'s Response', key='B', on_change=submit)

# Define the scroll operation as a function and pass in something unique for each
# page load that it needs to re-evaluate where "bottom" is
js = f"""
<script>
    function scroll(dummy_var_to_force_repeat_execution){{
        var textAreas = parent.document.querySelectorAll('section.main');
        for (let index = 0; index < textAreas.length; index++) {{
            textAreas[index].style.color = 'red'
            textAreas[index].scrollTop = textAreas[index].scrollHeight;
        }}
    }}
    scroll({len(st.session_state.chat)})
</script>
"""

st.components.v1.html(js)
4

“I was unable to achieve the effect of automatic scrolling in the py file, but I observed the front-end code and found that the height of the page’s’ body 'was always 0. In fact, the container you are currently using needs scrolling.”. I tried using st. components. v1. html () to execute JavaScript code, but this is not feasible. Because this method embeds an html under the iframe tag, the JavaScript code will be executed in this html without affecting the home page. Finally, I can only add the effect of automatic scrolling by modifying the local default ‘index. html’ front-end page, which requires modifying the files in the streamlit package. If you don’t mind later version iterations, you can use this method. Generally, the default ‘index. html’ file is located in your local folder, streamlint /static, where you can make the following modifications:

<script>

document.addEventListener('DOMContentLoaded', function() {
  // Write the code that needs to be executed after the document is loaded here
  // Here, priority is given to locating the completed div tags that can be loaded by opening the page
  const targetDiv = document.querySelector('#root > div:nth-child(1) > div.withScreencast > div > div');
  const observer = new MutationObserver(function(mutations) {
  // Execute the corresponding code when detecting a change in the div element
  // Locate the div tag that requires automatic scrolling here
  const parentDiv = document.querySelector("#root > div:nth-child(1) > div.withScreencast > div > div > div > section.main.css-k1vhr4.egzxvld5");
  // Locate your content div tag here. We need to scroll through the height of this content
  const targetDiv = document.querySelector(".block-container.css-k1ih3n.egzxvld4 > div:nth-child(1) > div");
  const height = targetDiv.getBoundingClientRect().height;
  // Enable scrolling
  parentDiv.scrollTop = height;
    });

    // Options for configuring a MutationObserver instance
    const config = { attributes: true, childList: true, subtree: true };

    // Start the MutationObserver instance
    if (targetDiv) {
    observer.observe(targetDiv, config);
    };
});

</script>

Note: Thistag needs to be placed below thetag to ensure that the component is loaded before testing

1 Like