CODEWITHSUNDEEP
htmlanimate-on-scroll
user15613304
user15613304

Reputation:

AOS Library: last <div> isn't shown due to page length

I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.

html{
  height:100%;
}
body{
  overflow-x: hidden;
}

h1{
  font-size : 90px;
  text-align: center;
}

p{
  width:50%;
  font-size:20px;
  text-align:justify;
  margin:auto;
  padding:20px;
  background-color: #3E9AE0;
}

div{
  margin-bottom:50px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  </head>
  <body>
    <div data-aos="fade-right" data-aos-duration="1000">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
      </p>
    </div>
    <div data-aos="fade-left" data-aos-duration="1000">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
      </p>
    </div>
    <div data-aos="fade-right" data-aos-duration="1000">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init({
        mirror:false,
      });
    </script>
  </body>
</html>

Upvotes: 0

Views: 946

Answers (1)

user15613304
user15613304

Reputation:

After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:

html{height:fit-content;}

As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.

Upvotes: 1

Related Questions