如何删除这个水平滚动？(皮科CSS)

我正在创建一个关于一个人的网站，但是我遇到了一个问题。我正在使用皮科CSS和一个叫做aos动画的库（滚动动画）。向上滚动时，我看到一个水平滚动条。向下滚动时，我没有看到水平滚动。在我的网站上上下滚动，注意当你向上滚动时水平滚动是可见的，当你向下滚动时是不可见的。我的主要问题是我希望那个水平滚动条消失。它应该是不可见的。下面是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
    />
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
  </head>
  <body>
    <!--Header-->
    <header
      class="container-fluid"
      data-aos="fade-up"
      data-aos-easing="linear"
      data-aos-duration="1500"
    >
      <article data-theme="light">
        <h1>{name}</h1>
      </article>
    </header>
    <!--Navigation-->
    <nav
      class="container-fluid"
      data-aos="fade-up"
      data-aos-easing="linear"
      data-aos-duration="1500"
    >
      <ul>
        <li><strong>JL</strong></li>
      </ul>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#achieve">Achievements</a></li>
      </ul>
    </nav>
    <!--Main Reading-->
    <main>
      <article
        class="container-fluid"
        data-aos="fade-right"
        data-aos-easing="linear"
      >
        <h2 id="about">About</h2>
        <!--Type about him here-->
        <small
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores hic
          doloribus reprehenderit iusto vitae debitis obcaecati non quis modi
          aperiam commodi cum cupiditate, optio, maxime provident repellat
          accusamus eveniet aspernatur.</small
        >
        <blockquote data-aos="zoom-in">
          "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
          Nam at dui sit amet ipsum cursus ornare."
          <footer>
            <cite>- Phasellus eget lacinia</cite>
          </footer>
        </blockquote>
      </article>
      <article
        class="container-fluid"
        data-aos="fade-left"
        data-aos-easing="linear"
      >
        <h2 id="achieve">Achievements</h2>
        <!--Type about him here-->
        <!--Fact 1-->
        <details data-aos="flip-left">
          <summary role="button">Fact 1</summary>
          <!--Type fact here-->
          <small
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            voluptatum laborum cum, voluptas aliquam repudiandae minus
            quibusdam, unde labore, quisquam nemo error perferendis. Sed
            excepturi atque fugiat quis, quisquam cupiditate?</small
          >
        </details>
        <!--Fact 2-->
        <details data-aos="flip-right">
          <summary role="button" class="secondary">Fact 2</summary>
          <!--Type fact here-->
          <small
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            voluptatum laborum cum, voluptas aliquam repudiandae minus
            quibusdam, unde labore, quisquam nemo error perferendis. Sed
            excepturi atque fugiat quis, quisquam cupiditate?</small
          >
        </details>
        <!--Fact 3-->
        <details data-aos="flip-left">
          <summary role="button" class="contrast">Fact 3</summary>
          <!--Type fact here-->
          <small
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            voluptatum laborum cum, voluptas aliquam repudiandae minus
            quibusdam, unde labore, quisquam nemo error perferendis. Sed
            excepturi atque fugiat quis, quisquam cupiditate?</small
          >
        </details>
      </article>
    </main>
    <!--Footer, Credits(You may fix)-->
    <footer
      class="container-fluid"
      data-aos="fade-down"
      data-aos-easing="linear"
      data-aos-duration="1500"
    >
      <article data-theme="light">
        <!--You can add other stuff here-->
        <small>{Write Credits}</small>
      </article>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script defer>
      AOS.init();
    </script>
  </body>
</html>

我尝试将class="container"更改为class="container-fluid"。但仍然不起作用。

根据我的研究你有两个选择
简单的方法：

body {
     overflow-x: hidden;
}

这段代码将阻止滚动条出现。许多网站都这样做。
或者，如果你想更具体一些，把滚动条保留在主体中，你可以把它放在受其影响的元素上，在本例中是main：

main {
     overflow-x: hidden;
}

狡猾的方式：现在的情况是[data-aos=“flip-left”]抛出了一个CSS translate 3d（100 px），它将你的元素向前翻转100 px。由于元素已经占据了100%，这些100 px的元素会通过屏幕，你会看到滚动。
您可以解决这个问题，并通过抛出-100px来保持效果，以补偿这一点，如下所示：

[data-aos=fade-left] {
     transform: translate3d(100px, 0, 0) translateX(-100px)
}

我还注意到滚动条可能会出现，因为'perspective' CSS设置得太低（2500 px）。增加到9999 px，它就不会再出现了。万一，它有时会出现，所以要修复的代码如下：

[data-aos=flip-left] {
     transform: perspective(9999px) rotateY(-100deg)
}
[data-aos=flip-left].aos-animate {
     transform: perspective(9999px) rotateY(0)
}
[data-aos=flip-right] {
     transform: perspective(9999px) rotateY(100deg)
}
[data-aos=flip-right].aos-animate {
     transform: perspective(9999px) rotateY(0)
}
[data-aos=flip-up] {
     transform: perspective(9999px) rotateX(-100deg)
}
[data-aos=flip-up].aos-animate {
     transform: perspective(9999px) rotateX(0)
}
[data-aos=flip-down] {
     transform: perspective(9999px) rotateX(100deg)
}
[data-aos=flip-down].aos-animate {
     transform: perspective(9999px) rotateX(0)
}

我把这两个代码放在一起，在我的电脑上，它没有发生了。这是值得进一步测试，看看效果是否真的没有受到损害。无论如何，通常最明显的事情是真正删除滚动条从身体本身，但这取决于你。

如何删除这个水平滚动？(皮科CSS)

1条答案

相关问题

热门标签

最新问答