Al reaccionar, me gustaría bloquear la barra de desplazamiento cuando el submenú está fuera y luego desbloquearla nuevamente cuando el menú está oculto. Presiono el mismo botón para abrir y cerrar el submenú (agrega y elimina traducir para este elemento). Con lo que hice, la página se bloquea con éxito, pero cuando presiono el botón de menú y el submenú desaparece, la página aún está bloqueada, ¿cómo puedo cambiar el código a continuación?
const [isActive, setActive] = useState(false); const toggleClass = () => { setActive(!isActive); document.body.style.overflow = "hidden" }; <div className="button" onClick={toggleClass} className={ isActive ? "nav-button closebtn active" : "nav-button closebtn"}> <span></span> </div> ¿Cómo puedo alternar el valor de overflow de oculto a desactivado presionando el botón, tal como lo hago al agregar la clase cuando presiono el mismo botón?
Use toggle y agregue estilo en el archivo CSS.
import './myStyle.css'; const [isActive, setActive] = useState(false); const toggleClass = () => { setActive(!isActive); document.body.classList.toggle('lock', isActive); // <-- Add this }; <div className="button" onClick={toggleClass} className={ isActive ? "nav-button closebtn active" : "nav-button closebtn"}> <span></span> </div>// miEstilo.css
.lock { overflow: hidden; }Yo creo que en tu togle tienes que validar si esta activo o no y en eso cambiar lo oculto a visible
Algo como:
const toggleClass = () => { setActive((active) => { if(active){ document.body.style.overflow = "visible"; return !active; } document.body.style.overflow = "hidden"; return !active; }); };