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
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
edit: Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets | MDN (mozilla.org)
2 Likes
Wow, perspective + css is amazing
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