我的个人网站具有可滚动性，但我想在使用加载器包装器加载页面时禁用该可滚动性。我不知道该怎么做。我以为
overflow: hidden;这是 HTML、CSS 和 JS。这是网站。请看。 --> https://elliott23.repl.co
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Elliott D'Orazio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta content="Elliott-D'Orazio" property="og:title" />
<meta content="my amazing portfolio website" property="og:description" />
<script src="script.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
</head>
<body>
<div class="split right content">
<h1 data-aos="fade-up" data-aos-delay="200">Elliott D'Orazio</h1>
<h3 data-aos="fade-left" data-aos-delay="200">Front-End Developer</h3>
<div class="icons">
<a href="#projects"><i class="fa-solid fa-bars fa-2x" style="color: #000000;" data-aos="fade-up"></i></a>
<a href="#aboutme"><i class="fa-solid fa-address-card fa-2x" style="color: #000000;" data-aos="fade-up"
data-aos-delay="400"></i></a>
<a href="#contact"> <i class="fa-solid fa-envelope fa-2x" style="color: #000000;" data-aos="fade-up"
data-aos-delay="600"></i></a>
</div>
</div>
<div id="projects">
<h1>These are my projects, some cool content</h1>
<div class="cards">
<div class="card" data-aos="fade-up" data-aos-duration="500">
<div class="card-content">
<h3>Sats2Cycles</h3>
<p>I did the front end for this project. Took it from an old not so good looking theme to a nice glassmorphism
theme.</p>
<h4><a href="https://sats2cycles.elliott23.repl.co" target="_blank">Sats2Cycles</a></h4>
</div>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="200" data-aos-duration="500">
<div class="card-content">
<h3>1st Elliott23</h3>
<p>This was my very first portfolio website. It was not good. At all. :(. My skills have gotten better since
them.</p>
<h4><a href="https://old-personal-website.elliott23.repl.co" target="_blank">Elliott23(old old)</a></h4>
</div>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="400" data-aos-duration="500">
<div class="card-content">
<h3>2nd Elliott23</h3>
<p>This was my second portfolio website. I liked this website version but this current website I like better.
</p>
<h4><a href="https://anotherwebsite.elliott23.repl.co" target="_blank">2nd Elliott23</a></h4>
</div>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="600" data-aos-duration="500">
<div class="card-content">
<h3>Carded(maintence)</h3>
<p>A social media app I am working on with a friend. (converting to TypeScript - under maitenence). Link still
works.</p>
<h4><a href="https://carded.lopste.repl.co" target="_blank">Carded</a></h4>
</div>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="800" data-aos-duration="500">
<div class="card-content">
<h3>Mandalorian</h3>
<p>This was made to replicate the Disney+ page. I was able to make it look exactly the same (fairly).</p>
<h4><a href="https://mandalorian.elliott23.repl.co" target="_blank">Mandalorian</a></h4>
</div>
</div>
</div>
</div>
<div class="split right" id="aboutme">
<h1>About Me</h1>
<div class="text-container" data-aos="fade-up" data-aos-duration="500">
<p>I'm Elliott D'Orazio. A 13 year old front end developer. I have a passion for programming websites and making
them look beautiful. I also enjoy robotics, specifically FTC robotics. I also enjoy tinkering aroung with think
which is the reason I joined robotics. 3D printing is one of my favorite things to do in my freetime other then
code. I love the satisfaction seeing the first layer go down. As you may have seen in my projects above I like
making website that have no point and are for fun, (the Elliott23 website). Then there is things like the
Mandalorian website remake. This is one that I am very, very proud of. Carded is probably one of my most
challenging because the front end was interesting when it came to layouts. I also have fun playing the viola
which is my primary instrument. I hope to play in a symphony one day.</p>
</div>
</div>
<div class="split left" id="contact">
<h1>Contact Me</h1>
<div class="contact-cards">
<div class="contact-card">
<h3><a href="mailto:[email protected]"><i class="fa-solid fa-envelope" style="color: #ffffff;"></i>
Send an Email</a></h3>
</div>
<div class="contact-card">
<h3><i class="fa-brands fa-discord" style="color: #fff;"></i> Dorazio#6628</h3>
</div>
<div class="contact-card">
<a href="https://github.com/Elliott24"><i class="fa-brands fa-github" style="color: #ffffff;"></i>
<h3>Github</h3>
</a>
</div>
</div>
</div>
<div class="mobile">
This page isn't viewable on mobile, move to a desktop to view it!
</div>
<div class="loader-wrapper">
<h1>This website is in progress.</h1>
</div>
</body>
</html>
:root{
--accent-color-: #4022d3;
color-scheme: dark light;
--background-white: white;
--background-dark: #222;
}
html:not(.dark) {
--text: white;
--background-color: var(--background-white);
}
html.dark {
--background-color: var( --background-dark);
--text: white;
}
html {
height: 100%;
width: 100%;
background-image: url('backgrounds/bd86goc4fhvenj72.jpg');
font-family: 'Rubik', monospace;
background-size: cover;
color: var(--text);
scroll-behavior: smooth;
background-attachment: fixed;
z-index: 1;
}
/* *{
outline: 1px red solid;
} */
.split {
height: 100%;
width: 45%;
position: absolute;
z-index: 2;
top: 0;
overflow-x: hidden;
padding-top: 20px;
text-align: center;
color: var(--text);
}
.right {
right: 0;
background-color: var(--background);
}
.left{
left: 0;
background-color: var(--background);
}
h1{
font-size: 7.4em;
font-weight: 800;
}
.icons{
display: flex;
flex-direction: row;
gap: 20px;
margin-left: 39%;
width: 136px;
}
.fa-solid{
color: var(--text) !important;
}
.fa-solid:hover{
content: '';
color: var(--accent-color-) !important;
cursor: pointer;
}
.mobile{
display: none;
}
@media screen and (max-width: 678px) {
body{
display: none;
}
.mobile{
display: block !important;
color: #fff;
}
}
#projects{
position: absolute;
top: 100%;
height: 100vh;
width: 60%;
margin-left: 40px;
}
#projects h1{
font-size: 3em;
}
.cards{
width: 150%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 40px;
}
.card{
width: 200px;
height: 230px;
background-color: #222;
display: flex;
justify-content: center;
text-align: center;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
transition: transform, box-shadow, .3s ease;
}
.card:hover{
transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 0px 0px 20px #7a7a7a;
}
a{
color: #00a3d7;
text-decoration: none;
transition: all .4s linear;
}
a:hover{
text-decoration: underline;
filter: brightness(1.6);
}
#projects h1{
background-image: linear-gradient(to bottom right, #ffffff, #00c7fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
#aboutme{
position: absolute;
top: 200%;
width: 50%;
}
#aboutme h1{
font-size: 4em;
background-image: linear-gradient(to bottom right, #ffffff, #00c7fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-container{
width: 80%;
height: 50%;
background-color: #222;
border-radius: 10px;
padding: 10px;
}
/* *{
outline: 1px red solid;
} */
#contact{
position: absolute;
top: 300%;
}
#contact h1{
font-size: 4em;
background-image: linear-gradient(to bottom right, #ffffff, #00c7fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-cards{
display: flex;
flex-direction: column;
gap: 40px;
margin-left: 35%;
}
.contact-card{
width: 10rem;
height: 5rem;
background-color: #222;
color: #fff !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
padding: 5px;
transition: all .2s ease-in;
}
.contact-card a{
color: #fff;
}
.contact-card:hover{
transform: scale(1.2);
-webkit-transform: scale(1.2);
box-shadow: 0px 0px 20px #7a7a7a;
}
.loader-wrapper{
width: 100vw;
height: 100vh;
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
transition: 0.5s ease opacity;
overflow:hidden;
}
.loader-wrapper h1{
font-size: 5em;
}
.loader-wrapper.invis {
opacity: 0;
}
.content{
opacity: 0;
}
.content.vis{
opacity: 1;
}
function $(qry){return document.querySelector(qry);}
setTimeout(() => {
$(".loader-wrapper").classList.add("invis")
$(".content").classList.add("vis")
}, 2500)
我尝试在 CSS 的
.loader-wrapper