AOS 库：最后 <div> 由于页面长度而未显示

Question

我的 html 页面中的 AOS（滚动动画）库似乎有问题。该代码工作正常，但问题是最后一个 div 不会运行它的 AOS 代码（淡入淡出），直到用户在特定像素范围内滚动它，这意味着如果我的身高设置为“100%”，页面将只显示一个空白 space，而 div 应该是。这是因为最后一个 div 的内容太短，实际上无法让用户在所述范围内滚动。当然，如果我将 html 的高度扩展到比页面中元素占用的高度更长的指定值，代码运行就可以了，但我真的很想避免这种情况并且只允许最后一个 div 出现，而不必添加 space 以便用户滚动更多一点。我将留下一个片段进行说明。

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>

Answer 1

在对代码进行了一些改动之后，我可能已经找到了针对这个特定案例的解决方案。将 CSS 中 html 标记的高度设置为属性“fit-content”似乎可以很好地解决问题，对于像我这样结构简单的页面。如果您以特定方式将元素放置在页面末尾附近，您可能想尝试其他方法。这是此解决方案所需的（非常简短的）代码，用于输入您的 CSS 文件：

html{height:fit-content;}

作为（很可能不相关的）旁注：Internet Explorer 不支持此属性。

AOS 库：最后 <div> 由于页面长度而未显示

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

html

animate-on-scroll