Scroll Snap? Has anyone figure out a way to do it?

[jakechevrier]

I’m making an app that has a bunch of “cards” and I want to scroll snap to the cards, does anyone have any suggestions on how to achieve this?

import streamlit as st


custom_css = """
    <style>


    .st-emotion-cache-142g7f {
        background: #353535;
        scroll-snap-type: y mandatory;
    }

    .st-emotion-cache-1voybx5 {
        background: red;
        scroll-snap-align: center;
    }
    

    </style>
    """

# Inject custom CSS
st.markdown(custom_css, unsafe_allow_html=True)

with st.container(border=False, height=500):
    for i in range(5):
        with st.container(height=400, border=True):
            st.write(i)

[edsaac]

The CSS is going to depend on the actual layout of your app. This is an example targeting the elements in the main area of the app.

Code:

import streamlit as st

css = """
<style>
    section.stAppViewMain {
        scroll-snap-type: y mandatory;
        scroll-padding: 4.0rem;
    }

    section.stAppViewMain div[data-testid="stVerticalBlock"] div {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
</style>
"""

st.html(css)

st.title("📜 Scroll Snap")

for i in range(1, 10):
    with st.container(border=True, height=400):
        st.header(f"Header {i}", anchor=False, divider="orange")
        cols = st.columns(2)

        with cols[0]:
            st.image("https://picsum.photos/200/150", caption=f"Image {i}")

        with cols[1]:
            st.markdown(f"Some content for section {i}.")

[jakechevrier]

thank you for the reply! I had to modify it somewhat because my attributes weren’t the same for some reason…

import streamlit as st

css = """
<style>
    section.main {
        scroll-snap-type: y mandatory;
        scroll-padding: 4.0rem;
    }

    section.main div[data-testid="stVerticalBlockBorderWrapper"] div {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
</style>
"""
[/details]


st.html(css)

st.title("📜 Scroll Snap")

for i in range(1, 10):
    with st.container(border=True, height=400):
        st.header(f"Header {i}", anchor=False, divider="orange")
        cols = st.columns(2)

        with cols[0]:
            st.image("https://picsum.photos/200/150", caption=f"Image {i}")

        with cols[1]:
            st.markdown(f"Some content for section {i}.")