Tengo estas animaciones de cambio de tema de color que son básicamente un círculo que crece rápidamente con un color dependiendo del botón que presiones.
Mi problema es que, al final de la animación, el círculo es tan ancho y alto que el tamaño de la página aumenta aunque la posición del círculo esté establecida en absoluto. Me gustaría que la página se mantuviera del mismo tamaño sin verse afectada por el tamaño del círculo.
Además, si alguien tiene posibles mejoras para compartir, ¡hágamelo saber!
function ultraDarkMode(){ grow(0,0,0); } function whiteMode(){ grow(255,255,255); } function darkMode(){ grow(68,58,58); } function grow(r,g,b){ let circle = document.getElementById("circle"); let body = document.body; circle.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'; circle.style.boxShadow = "0px 0px 50px 100px rgb(" + r + "," + g + "," + b + ")"; let i = 1; let interval = setInterval(()=>{ circle.style.height = circle.clientHeight + 100 + "px"; circle.style.width = circle.clientWidth + 100 + "px"; if(i == 30) { circle.style.height = 150 + "px"; circle.style.width = 150 + "px"; body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'; clearInterval(interval); } i++; }, 15) } #circle{ width: 200px; height: 200px; background-color: darkgray; border-radius: 50%; position: absolute; left: 50%; top: -200px; transform: translate(-50%, -50%); box-shadow: 0px 0px 50px 100px darkgray; z-index: -1; /* offset x offset y blur radius spread radius und color */ } <button type="button" onclick=darkMode()>Darkmode</button> <button type="button" onclick=whiteMode()>WhiteMode</button> <button type="button" onclick=ultraDarkMode()>UltraDarkMode</button> <div id="circle"></div>Agregué el siguiente CSS a su selector de #circle y evitó que apareciera la barra de desplazamiento.
#circle{ max-height: 100vh; max-width: 100vw; //... } La aplicación de desbordamiento oculto en el body parece funcionar, pero no sé cómo eso puede afectar su código futuro.
body{ overflow: hidden; }