👀 Views: 429 💬 Answers: 1 📅 Created: 2025-06-16

css scroll-snap frontend CSS

I'm working on a personal project and I'm implementing scroll snapping on a webpage that contains nested elements, but I'm working with issues with the inner container not snapping as expected... The outer container has `scroll-snap-type: y mandatory`, and I set `scroll-snap-align: start` on the inner child elements. However, when I scroll through the outer container, it doesn't seem to snap to the inner elements. This is the relevant CSS I have: ```css .outer-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; } .inner-container { height: 300px; scroll-snap-type: y mandatory; } .inner-element { height: 100%; scroll-snap-align: start; } ``` And the HTML structure looks like this: ```html <div class="outer-container"> <div class="inner-container"> <div class="inner-element">Item 1</div> <div class="inner-element">Item 2</div> <div class="inner-element">Item 3</div> </div> </div> ``` I've confirmed that the `overflow-y` property is correctly applied, and the outer container scrolls properly. However, when I scroll down, it skips over the first inner element entirely without snapping. I've tried experimenting with the heights and adding padding, but nothing seems to work. I’m testing this on Chrome version 93.0.4577.63 and need to replicate the scenario on Firefox. Any insights on why the snapping might not be functioning correctly here would be greatly appreciated. Is there a simpler solution I'm overlooking?