Prevent page from scrolling down

David15 · July 22, 2024, 3:18pm

There is an issue where Streamlit will generate HTML elements with empty id and the browser will scroll down to it.

A demo is available here: https://github.com/maxa-david-francoeur/streamlit-experimentations/blob/main/pages/scrolldown.py

And it is deployed here:

There is a number of issues (locked) that mention an issue with this but none of them appear to provide a reproducer so it’s hard to tell if the cause is the same but when I had the same issue I hunted until I found the issue.

In our case, we used the empty markdown: st.markdown("##") to add vertical spacing. But this will generate a h2 element with and empty id and then the browser will scroll down to it.

IMO this is unintended and this could be fix. I’d be happy to provide a fix if someone can open an issue on Github and I can get a PR up for it.

Other posts I’ve found:

https://discuss.streamlit.io/t/prevent-page-from-automatically-scrolling-down/46900/3
https://discuss.streamlit.io/t/prevent-chat-from-auto-scrolling-when-message-is-sent/56742/3

David15 · July 22, 2024, 6:36pm

The issue appears to be from this file: streamlit/frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx at 898fd8094f4ceb004c3eb929bcc88a5b6b72593f · streamlit/streamlit · GitHub

Basically the react component will configure/generate an anchor, use that as the id. Then it compares that anchor as follow:
window.location.hash.slice(1) === anchor

If this check is successful, the code assign the HTML node to target and then, with a 300ms delay, the browser will navigate to it:

github.com

streamlit/streamlit/blob/898fd8094f4ceb004c3eb929bcc88a5b6b72593f/frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx#L196


      
          const isInDialog = React.useContext(IsDialogContext)
          const [elementId, setElementId] = React.useState(propsAnchor)
          const [target, setTarget] = React.useState<HTMLElement | null>(null)
          
          const { addScriptFinishedHandler, removeScriptFinishedHandler } =
            React.useContext(LibContext)
          const onScriptFinished = React.useCallback(() => {
            if (target !== null) {
              // wait a bit for everything on page to finish loading
              window.setTimeout(() => {
                scrollNodeIntoView(target)
              }, 300)
            }
          }, [target])
          
          React.useEffect(() => {
            addScriptFinishedHandler(onScriptFinished)
            return () => {
              removeScriptFinishedHandler(onScriptFinished)
            }
          }, [addScriptFinishedHandler, removeScriptFinishedHandler, onScriptFinished])

system · January 18, 2025, 6:37pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Prevent page from automatically scrolling down Using Streamlit streamlit-cloud	2	1528	January 12, 2024
Prevent scroll on interaction? Using Streamlit	7	3039	March 15, 2024
Page scrolling on opening and reload Using Streamlit	12	4912	February 2, 2025
Page scrolls down when accessing page Using Streamlit	1	1501	September 29, 2022
Scrolling via Javascript not possible Using Streamlit debugging , javascript	3	136	July 1, 2024

Prevent page from scrolling down

Related topics