Как отключить прокрутку во время загрузки анимации? ⇐ CSS

[Anonymous]

В настоящее время я разрабатываю веб-сайт своей компании и просматриваю руководство по реализации анимации загрузки. Однако у меня возникла проблема с отключением прокрутки во время анимации. Я попробовал несколько методов, найденных в Интернете, но они, похоже, мешают стилю CSS моего сайта. Вы можете посетить мой сайт по адресу clickrabbit.co.
Буду признателен за любые советы!





Clickrabbit Preloader



.cr-loading-overlay {
position: fixed; /* Full screen background */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000; /* Ensure it stays on top */
}

.cr-loading-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: center;
}

#cr-svg {
height: 150px;
width: 150px;
stroke: #fff;
fill-opacity: 0;
stroke-width: 4px;
stroke-dasharray: 4500;
animation: draw 2.5s ease forwards;
}

@keyframes draw {
0% {
stroke-dashoffset: 4500;
}
100% {
stroke-dashoffset: 0;
}
}















// Change stroke color to black after SVG animation completes
setTimeout(function() {
document.getElementById("cr-svg").style.stroke = "#000";
}, 2500); // Duration of the SVG animation

// Fade out the overlay after the SVG animation and stroke color change
gsap.fromTo(
".cr-loading-overlay",
{opacity: 1},
{
opacity: 0,
duration: 1.5,
delay: 2.5,
onComplete: function() {
document.querySelector(".cr-loading-overlay").style.display = "none";
}
}
);




Я пробовал несколько подобных решений, но они не работают.





Clickrabbit Preloader



body.no-scroll {
overflow: hidden;
}

.cr-loading-overlay {
position: fixed; /* Full screen background */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000; /* Ensure it stays on top */
}

.cr-loading-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: center;
}

#cr-svg {
height: 150px;
width: 150px;
stroke: #fff;
fill-opacity: 0;
stroke-width: 4px;
stroke-dasharray: 4500;
animation: draw 3.5s ease;
}

@keyframes draw {
0% {
stroke-dashoffset: 4500;
}
100% {
stroke-dashoffset: 0;
}
}

.content {
opacity: 0; /* Hide content initially */
}















Welcome to Clickrabbit
This is the main content of the page.


document.addEventListener("DOMContentLoaded", function() {
gsap.fromTo(
".cr-loading-overlay",
{opacity: 1},
{
opacity: 0,
duration: 1.5,
delay: 2.5,
onComplete: function() {
document.querySelector(".cr-loading-overlay").style.display = "none";
document.body.classList.remove("no-scroll");
document.querySelector(".content").style.opacity = 1;
}
}
);
});





Подробнее здесь: https://stackoverflow.com/questions/786 ... -animation