i'm developing a project where the scrollbar needs to be hidden and unable to function for the first 4 seconds on the first render, when the site open (there's a gsap animation). so i set the * {overflow-y: hidden} on css and would like to make it auto again after those seconds with a setTimeout() function, how could i proceed?
document.querySelector("html").style.overflowY = "hidden";
after 4 secs:
document.querySelector("html").style.overflowY = "auto";
If you don't want to do it this way you could also do this (Codepen):
.class1 {
overflow-y: hidden;
}
.class2 {
overflow-y: auto;
}
after 4 seconds just replace class1 with class2 on the node
Third option I give you would be declaring a CSS variable and changing it with js:
:root {
--scrollbar-var: hidden;
}
html {
overflow-y: var(--scrollbar-var);
}
let root = document.documentElement;
root.style.setProperty('--scrollbar-var', "auto");