I haven’t really used scroll snapping. As far as I can tell, it isn’t working because main is not your scroll container. If you move the parent container CSS scroll-snap-type to the html selector it should work. Although, I’m not sure why it is behaving so aggressively when doing so.
Another option is to hide the overflow-y on the body and then add it to main by forcing a scroll overflow. But when doing so you will have to adjust how you are doing your centering in the sections. I would suggest you use flexbox or grid for centering anyway. Not sure if you also might need to make adjustments to any height calculations.
Example of forced scroll overflow:
html, body {
height: 100%;
}
body {
overflow-y: hidden;
}
main {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
}
Edit: I guess technically you do not need to hide the overflow on body. If you look at the second example from the article, I think you can see what I mean by having to create a scroll container. They are also using max-height: 100vh instead of propagating the height down.