Why isn't smooth snap scrolling working with my nav links? - css

Question

Smooth snap scrolling works in every regard except when the nav links are used. Btw enabling smooth scrolling in Chrome didn't help and it's not working in other browsers anyway so there's something I'm not getting.
Here's my Codepen in case you don't want to deal with the provided code: https://codepen.io/CyberGolem/pen/RwLGJeQ
Many thanks in advance...
const section = document.querySelector(".container__section");
const sections = document.querySelectorAll(".container__section");
const clrBG = ["#dbf8c3", "#d8b0dd", "#9b9bdb", "#fff1c5", "#a9ecf8"];
const options = {
threshold: 0.5,
// rootMargin: "-100px",
};
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
}
console.log(entry.target);
// observer.unobserve(entry.target);
});
}, options);
sections.forEach((section) => {
observer.observe(section);
});
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
text-decoration: none;
scroll-behavior: smooth;
overflow-y: scroll;
}
::-webkit-scrollbar {
display: none;
}
:root {
--nav-width: 10vw;
}
body {
color: #000;
background-color: whitesmoke;
font-family: "montserrat", sans-serif;
font-weight: 400;
width: 100vw;
height: 100vh;
margin: 0;
-webkit-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.site-logo {
font-weight: 900;
font-size: 3rem;
color: var(--text);
text-decoration: none;
border: 1px solid red;
}
header {
--text: black;
--text-inverse: #333;
--background: transparent;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: var(--nav-width);
z-index: 999;
padding: 2em 3em;
-webkit-transition: background 250ms ease-in;
transition: background 250ms ease-in;
background: var(--background);
color: var(--text);
border: 3px solid blue;
}
.nav-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.nav-bar .nav__list {
list-style: none;
margin: 0;
padding: 0;
background: lightblue;
}
.nav-bar .nav__link {
--spacing: 1em;
margin-top: 10px;
text-decoration: none;
color: inherit;
display: inline-block;
padding: calc(var(--spacing) / 2) var(--spacing);
position: relative;
letter-spacing: 2px;
font-size: 0.9rem;
}
.nav-bar .nav__link:after {
content: "";
position: absolute;
bottom: 0;
left: var(--spacing);
right: var(--spacing);
height: 2px;
background: currentColor;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 150ms ease-in-out;
transition: -webkit-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;
transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}
.nav-bar .nav__link:hover::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav-bar .nav__link--btn {
border: 1.5px solid currentColor;
border-radius: 2em;
margin-left: 1em;
-webkit-transition: background 250ms ease-in-out;
transition: background 250ms ease-in-out;
letter-spacing: 1px;
padding: 0.75em 1.5em;
}
.nav-bar .nav__link--btn:hover {
background: var(--text);
color: var(--text-inverse);
border-color: var(--text);
}
.nav-bar .nav__link--btn::after {
display: none;
}
.nav-bar .nav__link--btn--highlight {
background: limegreen;
border-color: limegreen;
color: #333;
}
.nav-bar .nav__link--btn--highlight:hover {
background: var(--text);
border-color: var(--text);
}
.nav-scrolled {
--text: #333;
--text-inverse: #f4f4f4;
--background: #f4f4f4;
-webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
}
.container {
width: 100%;
height: 100%;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.container__section {
height: 100vh;
width: 100vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-snap-align: start;
font-family: "Rubik", sans-serif;
}
.container #sec0 {
color: slategrey;
}
.container #sec1 {
color: red;
}
.container #sec2 {
color: blue;
}
.container #sec3 {
color: green;
}
.container h2 {
font-size: 23rem;
}
/*# sourceMappingURL=main.css.map */
<body>
<header>
<div class="nav-bar">
<a href="#sec0"
class="site-logo"
aria-label="homepage">HOME</a>
<nav>
<ul class="nav__list">
<li class="nav__list--item">
<a href="#sec1"
class="nav__link">SEC 1</a>
</li>
<li class="nav__list--item">
<a href="#sec2"
class="nav__link">SEC 2</a>
</li>
<li class="nav__list--item">
<a href="#sec3"
class="nav__link">SEC 3</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container">
<section class="container__section"
id="sec0">
<h2>HOME</h2>
</section>
<section class="container__section"
id="sec1">
<h2>ONE</h2>
</section>
<section class="container__section"
id="sec2">
<h2>TWO</h2>
</section>
<section class="container__section"
id="sec3">
<h2>THREE</h2>
</section>
</main>
</body>