I have tried like 5 different tutorials at this point but none of them have gotten scroll snapping to work in my project. I left some things I have tried in comments and included my most recent attempt
html{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Noto Sans', sans-serif;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
/*
.scroll_container{
overflow-y: scroll;
scroll-snap-type: y mandatory;
}*/
section{
/*min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;*/
scroll-snap-align: start;
height: 100vw;
}
<body>
<div class="scroll_container">
<section>
<h1>Tyler Olson</h1>
</section>
<section class = "new1_section">
<h2>new section1</h2>
<p>lkhrogisahlkjsbhdgnbuherldofiubnweroiubndsoiufbdpsoibro unbowbbvbidsjb</p>
</section>
<section class = "new2_section">
<h2>new section2</h2>
<p>lkhrogisahlkjsbhdgnbuherldofiubnweroiubndsoiufbdpsoibro unbowbbvbidsjb</p>
</section>
<section class = "new3_section">
<h2>new section 3</h2>
<p>alksdfj;lgsfakhg;ldskajgf;dlsakjhgk;lsahgl;fsakhg;lsakhfg;ljsaghs;alkgh</p>
</section>
<section class = "new4_section">
<h2>new section 4</h2>
<p>as;ldkfj;alskfhgd;lskjahg;lsakhjfg;lsakfhg;alsfjhg;alsjfhg;laskfghj</p>
<br>
<p><a href="https://www.freepik.com/free-vector/data-stream-digital-binary-code-background_12686653.htm#query=programming%20background&position=5&from_view=keyword">Image by starline</a> on Freepik</p>
</section>
</div>
</body>
please let me know any recommendations you have, thank you in advance
How to correctly setup Vertical scroll snap css https://www.youtube.com/watch?v=MsmvhpBXosM&t=200s these are two of the guide/posts I've tried to follow but couldn't get working