使用 setTimeout() function 关闭溢出-y

Question

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?

Answer 1

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");