Have only one horizontal scrollbar for two streamlit.writes in two streamlit.columns

🎈 Using Streamlit
1

Hello,

For the moment I have a horizontal scroll bar for each of my two st.writes. I would like to have only one that scrolls both texts at the same time. I show you my code :

col1, col2 = st.columns(2)
res1= My_function(st.session_state.default1, st.session_state.default2)[0]
res2 = My_function(st.session_state.default1, st.session_state.default2)[1]

with col1:
    st.write(
        f"""
        <div style="max-width: 600px; overflow: auto; overflow-y: hidden;">
            <p style="white-space: nowrap;">{res1}</p>
        </div>
        """,
        unsafe_allow_html=True,
)
        
with col2:
    st.write(
        f"""
        <div style="max-width: 600px; overflow: auto; overflow-y: hidden;">
            <p style="white-space: nowrap;">{res2}</p>
        </div>
        """,
        unsafe_allow_html=True,
)
2

Hi @ttuz,

Thanks for sharing this question, and sorry for the late response.

Unfortunately, the code snippet you shared isn’t runnable as-is (there are undefined functions and missing import statements).

However, I think I understand what you’re asking – this StackOverflow thread covers creating two columns with one common scroll. I’d imagine you could add this to your Streamlit app. I’ll paste the HTML/CSS here for your reference:

Example CSS:

.scrollcontainer {
  width:100%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  height: auto;
  bottom:0px;
  top:60px;
}

.split {
  height:100%;
  width: 50%;
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

Example HTML:

<header>
    <h1>Header!</h1>
  </header>
  <div class="scrollcontainer">
  <div class="split left">
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
  </div>
  <div class="split right">
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side...</p>
  </div>
</div>

There isn’t a built-in way to do this with just Streamlit, so I think HTML/CSS would be your best bet.