Perspective Scroll Snap

I'm curious to see if anyone has implemented a scroll snap on a perspective flex container session, IE I have row direction flex container that wraps the children when viewed on a phone like device.
It would be nice to snap the vertical scrolling to each child container.

Might be possible just by specifying the right style property?

2 Likes

It doesn't seem to respect the property :frowning:
I'll have to do more digging...

If you're directly adding it to the component, try react-style camelcase, e.g. scrollSnapType, instead of snake-case (if that's what you tried). Check it in browser dev tools on the actual page to see if it's being emitted.

Hold on, it seems to be working in some fashion. You have to add the scroll-snap-type to the parent then add scroll-snap-align to each child. I'll test it some more :slight_smile:

edit: Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets | MDN (mozilla.org)

2 Likes

Wow, perspective + css is amazing :star_struck:

I got my desired effect by adding these style props to the parent container

overflowY: scroll
scrollSnapType: y mandatory

and this to each child

scrollSnapAlign: start
6 Likes