Page scrolling issue with Plotly on streamlit > 1.34.0

[MrEdwards007]

Good day to you,

I was previously running Streamlit 1.49.1 locally using Plotly to display multiple charts\graphs from real-time data stream updating every 250 milliseconds. While using Plotly, whenever the chart would render, it would cause the screen to scroll up to the top of the page and flash, making all content below the chart effectively unreachable, as the page content scrolls up frequently. After trying a number things without success, such as trying to affect the scrollbar, I searched the forums and found this a repeated issue that has not been addressed.

The below is NOT my code but code from @poilkj09862 who has the same issue.

After reading this post, I reverted to streamlit 1.34.0 as a member offered a mitigation and the problem went away. That reversion prevents me from using newer widgets and updated code BUT the debilitating scrolling of the chart\page is mitigated.

Please advise.

Thank you.

The page scrolling issue when Real-time plot with plotly

Hi. You can partially solve this problem by installing an older version (streamlit==1.34.0). This will fix page scrolling and opening fullscreen mode. At the same time, graphics scaling will still be unavailable, but at least it’s something.

import streamlit as st
import plotly.graph_objects as go
import pandas as pd
import numpy as np
import time
from streamlit import session_state as stss

center_freq = ['20', '25', '31.5', '40', '50', '63', '80', '100', '125', '160', '200', '250', '315', \
        '400', '500', '630', '800', '1 k', '1.25 k', '1.6 k', '2 k', '2.5 k', '3.15 k','4 k', '5 k', '6.3 k', '8 k', '10 k', '12.5 k', '16 k', '20 k']

if "a" not in stss:
    stss.a = pd.DataFrame(np.random.rand(60)*100, columns=['r_value'])
    stss.a['x'] = np.arange(60)
if "b" not in stss:
    stss.b = pd.DataFrame(np.random.rand(len(center_freq))*50, columns=['r_value'])
    stss.b['x'] = np.arange(len(center_freq))
    
if "fig1" not in stss:
    stss.fig1 = go.FigureWidget(go.Scatter())
    stss.fig1.update_layout(
                title=f"Real-Time data",
                xaxis_title="Time Stamp",
                yaxis_title="Data",
            )
if "fig2" not in stss:
    stss.fig2 = go.FigureWidget(go.Bar())
    stss.fig2.update_layout(
                title=f"One Third Octave Band", 
                xaxis_title="Frequency Band",
                yaxis_title="PSD",
            )
def main():

    st.set_page_config()

    # creating a single-element container.
    st.title("Test")

    placeholder1 = st.plotly_chart(stss.fig1)
    placeholder2 = st.plotly_chart(stss.fig2)
 
    while True:
       
        stss.a['r_value'] = np.random.rand(60)*100
        stss.b['r_value'] = np.random.rand(len(center_freq))*50


        with placeholder1.container():
            stss.fig1.data[0].x = stss.a["x"]
            stss.fig1.data[0].y = stss.a["r_value"]
            st.plotly_chart(stss.fig1)

        with placeholder2.container():
            stss.fig2.data[0].x = stss.b["x"]
            stss.fig2.data[0].y = stss.b["r_value"]
            stss.fig2.update_xaxes(
                            tickmode="array",
                            tickvals=stss.b.index,
                            ticktext=center_freq,
                            tickangle=-45,
                            title_text="Frequency Band",
                            title_font=dict(size=12)
                        )
            st.plotly_chart(stss.fig2)


        time.sleep(1)

if __name__ == '__main__':
    main()

St.rerun Issue - Page flickers and scrolls to top on data refresh

I’m building a real-time temperature monitoring dashboard using st.empty() as a single-element container for dynamic updates. While the data refresh works, every update causes two issues : The entire page flickers (elements briefly disappear/reappear) The screen scrolls back to the top, disrupting user experience What I tried : Using st.rerun() in a loop with time.sleep() for periodic updates Implementing st.session_state to preserve filter selections Adding JavaScript to save/restore scrol…

Scroll to element after creating a plotly_chart

There is a problem after version 1.31. When creating plotly_chart one after another, it scrolls to the last created plot. In my case I’m trying to create 4 plots. In creation, it scrolls down to show elements while page is loading. The events triggered in the browser are scroll and scrollEnd. I couldn’t figure it out how to prevent these scrolls. I cannot share the code due to confidentally issues. Assume this is the code: import streamlit as st import plotly.graph_objects as go def create_…

[gtdang]

My app is having this issue and I discovered some things while debugging. My app doesn’t have constant stream/refresh but rather it has interactive widgets st.selectbox and st.checkbox that allow the user to change parameters and scales of plotly plots. When the plot re-renders it scrolls up, but only on the last plot! I replicated my plot multiple times to experiment and the scroll-up only happens when viewing the last plot–when the browser’s viewport was close to the bottom of the page. It didn’t scroll to the top of the page either, just slightly up. Another thing I discovered was that this behavior only happened in Safari and Firefox but not Chrome.

So this probably has to do with browser scroll anchoring. Chrome is somehow keeping the viewport stable but other browsers are adjusting to the shrinking div container of the plot. When the plot re-renders the div momentarily shrinks and pushes the view port up, and when the plot is regenerated the div expands again but the viewport stays where it was pushed.

Not the most elegant solution but what I ended up doing was putting a bunch of blank padding at the bottom of the page…

st.markdown("<div style='height:600px;'></div>", unsafe_allow_html=True)