# Perspective Scroll Snap

**URL:** <https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 30, 2022, 8:01pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107 "2022-11-30T20:01:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 30, 2022, 8:01pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107/1 "2022-11-30T20:01:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 30, 2022, 8:05pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107/2 "2022-11-30T20:05:32Z")

</div>

Might be possible just by specifying the right style property?

> **[scroll-snap-type - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type)**
>
> The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 30, 2022, 8:21pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107/3 "2022-11-30T20:21:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 30, 2022, 8:23pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107/4 "2022-11-30T20:23:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 30, 2022, 8:27pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107/5 "2022-11-30T20:27:32Z")

</div>

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)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 30, 2022, 8:45pm UTC](https://forum.inductiveautomation.com/t/perspective-scroll-snap/67107/6 "2022-11-30T20:45:26Z")

</div>

Wow, perspective + css is amazing 🤩

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

```auto
overflowY: scroll
scrollSnapType: y mandatory

```

and this to each child

```auto
scrollSnapAlign: start

```