I've run into a problem with scroll snap on my website. Every time the screen size changes, like when the mobile browser's navbar is opened or closed, the scroll snap behavior goes haywire. Even after returning to the top of the page, the snap feature doesn't work correctly. I've been grappling with this issue for a few days now without any luck in finding a solution. Can someone please lend me a hand in troubleshooting this issue?
Below is an excerpt of the code I'm currently using:
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overscroll-behavior: contain;
}
main {
max-width: 390px;
margin: auto;
top: 0;
left: 0;
right: 0;
}
.container {
top: 0;
position: sticky !important;
margin: auto;
border-radius: 15px;
height: 100lvh;
max-width: 390px;
width: 100%;
font-size: 48px;
scroll-snap-align: start;
font-size: 48px;
}
.container:nth-child(1) {
background-color: red;
}
.container:nth-child(2) {
background-color: blue;
}
.container:nth-child(3) {
background-color: bisque;
}
.container:nth-child(4) {
background-color: rgb(0, 255, 0);
}
.container:nth-child(5) {
background-color: rgb(0, 255, 242);
}<main>
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</main>https://codepen.io/norouzy/pen/wvONEev
I need help figuring out how to maintain scroll snap functionality even when the browser navbar is toggled. Any advice or suggestions would be highly appreciated. Thank you!