I'm encountering an issue with CSS Snap Scroll where it doesn't scroll smoothly when using the mouse wheel, but it works perfectly fine when using the keyboard arrows.
Is there a way to make it work smoothly with the mouse wheel as well? Any insights or suggestions would be greatly appreciated.
I have 5 sections inside the html tag.
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
height: 100vh;
width: 100%;
}
section {
height: 100vh;
width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
} <body>
<nav class="navbar">
<img
src="assets/navbarIcon.svg"
alt="navIcon"
class="navIcon"
width="25"
onclick="toggleNavMenu()"
id="nav-toggler"
/>
<ul class="navLinks nav">
<li><a href="#inicio" class="active">Home</a></li>
<li><a href="#semillas">Semas</a></li>
<li><a href="#sobreNosotros">Nosotros</a></li>
<li><a href="#contacto">Contacto</a></li>
<li><a href="#preguntas">Preguntas Frecuentes</a></li>
</ul>
</nav>
<div class="navbar navbarMenu" id="nav-menu">
<ul class="navbarMenuLinks nav" id="nav-links">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#semillas">Semas</a></li>
<li><a href="#sobreNosotros">Nosotros</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
<section id="inicio" class="flex flex-col justify-center items-center">
<header class="header">
<img
src="./assets/Logotipo_CamaloteSeeds_SinFondo-09.png"
alt="logo"
width="160"
id="nav-logo"
/>
</header>
</section>
<section id="semillas" class="overlay">
<div class="info">
<div class="info-img">
<img
src="./assets/images/Genética camalote logo-20.png"
alt=""
class="logo-genetica"
/>
</div>
<div class="info-img">
<h1 class="texto-genetica">
Conocé todas las <strong>características</strong> de nuestras
semillas.
</h1>
</div>
</div>
<div class="swiper">
<img
src="./assets/images/Flechas-25.png"
class="flechas flecha-izq prev-btn"
/>
<img
src="./assets/images/Flechas-26.png"
class="flechas flecha-der next-btn"
/>
<div class="swiper-wrapper">
<!-- Slide-start -->
<div class="swiper-slide">
<img
src="./assets/images/Tarjeta Genéticas-28.png"
alt=""
class="seeds-img"
/>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide">
<img
src="./assets/images/Tarjeta Genéticas-29.png"
alt=""
class="seeds-img"
/>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide">
<img
src="./assets/images/Tarjeta Genéticas-27.png"
alt=""
class="seeds-img"
/>
</div>
<!-- Slide-end -->
</div>
<div class="swiper-pagination">
<div class="swiper-pagination-bullet">
<img src="./assets/images/navegadores-22.png" alt="" />
</div>
</div>
</div>
</section>
<section id="sobreNosotros">
<header class="headerNosotros">
<img
src="./assets/Logotipo_CamaloteSeeds_SinFondo-09.png"
alt="logo"
width="160"
id="nav-logo"
/>
</header>
<div class="info-nosotros">
<div class="quienes-somos">
<h1 class="title">¿Quiénes somos?</h1>
<p class="text">
Somos un grupo de amigos de Santa Fe con más de 6 años de
experiencia como cultivadores y 3 años como criadores de semillas.
Hemos registrado nuestra variedad en INASE y ahora somos criadores y
fitomejoradores de categoría A. <br class="text-br"> Estamos emocionados de anunciar que
hemos comenzado a vender oficialmente nuestra genética al público,
ofreciendo nuestras semillas de manera legal en growshops y a
aquellos que tienen REPROCANN.
</p>
</div>
<div class="foto-expo">
<img
src="./assets/images/Nosotros/galería imágenes-35.png"
class="img-galeria"
id="caca"
/>
<img
src="./assets/images/Nosotros/texto fotográfo créditos-36.png"
class="img-creditos"
/>
<button class="ver-mas-btn">
ver más
</button>
</div>
</div>
</section>
<section id="contacto">
<header class="header-contacto">
<img
src="./assets/Logotipo_CamaloteSeeds_SinFondo-09.png"
alt="logo"
width="160"
id="nav-logo"
/>
</header>
<div class="contenedor-contacto">
<div class="container-wrapper">
<div class="form-wrapper">
<form class="form-contacto">
<h2>Hola! <span class="empecemos">Empecemos</span></h2>
<input type="text" placeholder="Tu nombre">
<input type="text" placeholder="Asunto">
<textarea placeholder="Mensaje"></textarea>
</form>
</div>
<div class="redes-contacto"></div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>Snap Scroll is working fine, except for not having that smooth effect that does have when using the arrows or clicking an <a> link to go to another section.