I am creating a website about a person, but I ran into a problem. I am using pico CSS and a library called aos animation(animation on scroll). When I scroll up, I see a horizontal scroll bar. When I scroll back down, I see no horizontal scroll. Scroll up and down on my website and notice how the horizontal scroll is visible when you scroll up and invisible when you scroll down. My main problem is that I want that horizontal scroll bar to be gone. It should not be visible. Here is my code:
<!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/[email protected]/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>
I tried changing the class="container" to class="container-fluid". But it still didn't work.
From what I've studied here you have two options:
The easy way:
This code will prevent the scrollbar from appearing. Many sites do this.
Or, if you want to be more specific and keep the scrollbar in the body, you can just place it on the element that is being affected by its effect, in this case, main:
The tricky way: What is happening is that [data-aos="flip-left"] is throwing a CSS translate3d(100px) which flips your element forward by 100px. As the element already occupies 100% these 100px more pass the screen and you get the scroll.
You can work around this and keep the effect by throwing -100px to compensate for this as follows:
I also noticed that the scrollbar can appear because the 'perspective' CSS is set too low (2500px). Increase it to 9999px and it won't happen anymore. In case, it appears sometimes so the code to fix is this:
I put these two codes together and on my computer it didn't happen anymore. It is worth testing further to see if the effect has really not been compromised. Anyway, usually the most obvious thing is to really remove the scrollbar from the body itself, but it's up to you.