java 如何禁用滚动时页面加载与加载器？

我的个人网站有滚动功能，但我想禁用滚动功能时，页面加载加载器 Package .我不知道如何做到这一点.我以为overflow: hidden;会工作，但它没有.我希望有人给予我一个答案关于如何禁用滚动.另一个重要的事情是，加载器是有2.5秒.
这是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/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/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:doraz09938@loswego.k12.or.us"><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类中的溢出。这不起作用。我用谷歌搜索了一下，没有得到一个有效的答案。感谢任何帮助我的人！

java 如何禁用滚动时页面加载与加载器？

1条答案

相关问题

热门标签

最新问答