Tengo un navegador móvil y lo abro usando este código en el archivo JS:
var toggleButton = document.querySelector(".toggle-button"); var mobileNav = document.querySelector(".mobile-nav"); var closeButton = document.querySelector(".close-button"); toggleButton.addEventListener("click", function () { mobileNav.classList.add("slide"); }); closeButton.addEventListener("click", function () { mobileNav.classList.remove("slide"); }); .mobile-nav { position: fixed; transition: 0.4s ease; transform: translateX(1400px); } .slide { transform: translateX(0); }cuando me desplazo hacia abajo y abro la navegación móvil usando la clase de diapositiva, la barra de desplazamiento sube, ¿cómo solucionarlo? quiero que permanezca en el lugar actual donde abro el menú de diapositivas.
aquí está la página del proyecto Github para obtener más códigos: ingrese la descripción del enlace aquí
y aquí está el sitio web en línea para reproducir el problema, solo haga que la página del navegador sea más pequeña que 768 px y desplácese hacia abajo, luego toque el ícono de hamburguesa para ver el problema.
const navSection = document.querySelector(".nav-section"); function openNav() { navSection.classList.add("open-nav") } function closeNav() { navSection.classList.remove("open-nav") } .nav-section{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; transition: 0.25s; pointer-events: none; } .nav-section nav{ display: flex; flex-direction: column; position: relative; transform: translateX(-100%); width: 20rem; height: 100%; background: red; } .open-nav{ pointer-events: all; opacity: 1; background: rgba(0, 0, 0, 0.5); } .open-nav nav{ transform: translateX(0%); } .close-nav-btn{ position: absolute; right: 0; top: 0; } <div class="open-btn"> <button onclick="openNav()">open</button> </div> <section class="nav-section"> <nav> <a>nav 0</a> <a>nav 1</a> <a>nav 2</a> <a>nav 3</a> </nav> <button onclick="closeNav()" class="close-nav-btn">close</button> </section>¿Así tal vez?