CODEWITHSUNDEEP
htmlcssscroll-snap-pointsscroll-snap
Athanasios Babasidis
Athanasios Babasidis

Reputation: 262

CSS scroll snap points with overflow greater than 100vh?

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?

Upvotes: 10

Views: 2233

Answers (1)

Rajat
Rajat

Reputation: 1

add overflow-y: scroll to the parent.

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

and also scroll-snap-align goes into child element

Upvotes: 0

Related Questions