Estoy desarrollando un proyecto en el que la barra de desplazamiento debe estar oculta y no puede funcionar durante los primeros 4 segundos en el primer renderizado, cuando se abre el sitio (hay una animación gsap). así que configuré * {overflow-y: hidden} en css y me gustaría volver a hacerlo automático después de esos segundos con una función setTimeout(), ¿cómo podría proceder?
document.querySelector("html").style.overflowY = "hidden";después de 4 segundos:
document.querySelector("html").style.overflowY = "auto";Si no quieres hacerlo de esta manera, también puedes hacer esto ( Codepen ):
.class1 { overflow-y: hidden; } .class2 { overflow-y: auto; }después de 4 segundos, simplemente reemplace class1 con class2 en el nodo
La tercera opción que te doy sería declarar una variable CSS y cambiarla con js:
:root { --scrollbar-var: hidden; } html { overflow-y: var(--scrollbar-var); } let root = document.documentElement; root.style.setProperty('--scrollbar-var', "auto");