I am trying to use scroll snap to scroll between each section and fit the section to the view. However there is some sort of delay when I scroll and when the section snaps. It is weird because if I put the exact same code into a codepen(or the code snippet below) that delay will not happen. To try be more specific when I use codepen each step of my scroll wheel will scroll to a new section. However when I don't use codepen and just run my html file the scroll snap only happens when I stop scrolling or if I scroll one step down or up it will snap but only after what feels like a 750ms delay. Any help would be much appreciated.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
/* All the snapping stuff */
.scroll-container {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: center;
}
/* Other styles */
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}<div class="scroll-container">
<section>
<h2>Section 1</h2>
</section>
<section>
<h2>Section 2</h2>
</section>
<section>
<h2>Section 3</h2>
</section>
<section>
<h2>Section 4</h2>
</section>
</div>