CSS scroll snap points with overflow greater than 100vh?

Question

I am having trouble implementing scroll snap points when containers are taller than 100vh. I want to use mandatory snap points, but also allow a user to scroll when the height is greater than 100vh.

I've sort of made this work by adding additional snap points to where I want users to be able to scroll through without snapping to the top of a div that is taller than 100vh.

.parent {
    min-height: 100vh; //actual is taller than 100vh
    scroll-snap-align: start;
}

.child {
    scroll-snap-align: center;
}

I want to be able to scroll naturally through a tall container without always snapping to the top on scroll. This sort of works in Chrome, but in Safari, any overflow snaps the user back to the top of the parent. Is there a way to use snap points on containers taller than the window height while being able to scroll through the overflow?

Spitsbergen

If you solved this, it'd be great if you could share your solution. – Flagwaving

Any solution yet? – Exstipulate

Answer 1

add overflow-y: scroll to the parent.

.parent{
   max-height:100vh;
   overflow-y:scroll;
 }

and also scroll-snap-align goes into child element

Pome