How to Disable Pull-to-Refresh / Overscroll-Refresh on Mobile (Streamlit Cloud vs Local Server)?

Community Cloud
,
1

Hi all,

I’m trying to disable the pull-to-refresh (overscroll refresh) behavior on mobile devices when using Streamlit, but I’m running into issues.

The goal:

Prevent users from accidentally refreshing the entire app when they scroll upwards on a mobile device (iOS Safari/Chrome on Android).

What I tried:

I added this CSS to disable overscroll behavior:

st.markdown("""
    <style>
        html, body {
            overscroll-behavior: none !important;
            touch-action: none !important;
        }
    </style>
""", unsafe_allow_html=True)

I also tried injecting it via components.html() with a <style> tag and console.log() debug messages:

import streamlit.components.v1 as components

components.html("""
    <script>
        console.log("✅ Custom JS loaded.");

        const style = document.createElement('style');
        style.innerHTML = `
            html, body {
                overscroll-behavior: none !important;
                touch-action: none !important;
            }
        `;
        document.head.appendChild(style);
    </script>
""", height=0)

Result: On Streamlit Cloud the CSS/JS has no effect, and the pull-to-refresh behavior persists.

Questions:

  1. Is there a difference between how Streamlit Cloud and local servers handle injected HTML/CSS/JS?

  2. Is there any supported way to prevent pull-to-refresh (overscroll-refresh) on mobile devices in Streamlit apps?

  3. Can this be controlled through config.toml, app settings, or experimental features?

Any advice or workaround would be appreciated!

Thanks,
— [savpank]

2

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