Prevent scroll on interaction?

[ahoho]

When a user interacts with elements and the page reloads, Streamlit scrolls to the the top of the page, which is very distracting and inhibits ease-of-use. It would be preferable if the app did not scroll when, e.g., a button is pressed. This behavior seems relatively new, and was not an issue in earlier versions (perhaps pre 1.22?).

[Goyo]

I cannot reproduce that. I used Streamlit versions 1.23.1 and 1.24.0, and browsers Gnome Web 44.5+ and Firefox 114.0.2.

[camole]

Here is what I observed with this code:

import streamlit as st
import numpy as np
import pandas as pd


st.set_page_config(
    layout='wide',
    page_icon='🎈'
)


st.title('🧫 Title')
# endregion


st.header('Subtitle 1')
choice = st.radio(label='labels', options=['choice1', 'choice2'], label_visibility='collapsed')

if choice == 'choice1':

    st.write("""
    Choice 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    """)

    st.dataframe(
        pd.DataFrame({
            'A': np.arange(1, 12),
            'B': np.arange(1, 12),
            'C': np.arange(1, 12),
        }),
    )

else:
    st.write("""
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Choice 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    """)

I am using streamlit 1.23.0 and 1.24.0. In the gif below, I first selected choice 1, scrolled the page down a bit, then alternating clicks between choice 1 and choice 2. The page appears automatically moves up by itself. Is there a fix for this?

[ahoho]

Yes, this is exactly what’s happening—how at the end of your gif it scrolls right back up (although your now-deleted gif seems a bit closer to what I’m seeing). I cannot find a workaround.

[Goyo]

It seems to be browser-dependent. I can see the same in edge but not in Firefox.

[Dallas]

This may be late, but you can add the following to your python script to prevent the webpage from automatically scrolling on content change:

st.markdown("""
<style>
    * {
       overflow-anchor: none !important;
       }
</style>"""", unsafe_allow_html=True)

[Zedelghem]

Didn’t work for me but the following did:

*, ::before, ::after {
    box-sizing: inherit;
}