0

我的 html 页面中的 AOS（滚动动画）库似乎有问题。该代码工作正常，但问题是最后一个 div 不会运行其 AOS 代码（淡入右），直到用户在一定的像素范围内滚动它，这意味着如果我的高度设置为“100% "，页面将只显示 div 应该在的空白区域。这是因为最后一个 div 的内容太短，实际上无法让用户在所述范围内滚动。当然，如果我将 html 的高度扩展到比页面中元素占用的高度更长的指定值，代码运行良好，但我真的想避免这种情况，只允许最后一个 div 出现必须为用户增加一点滚动空间。我将留下一个片段以供澄清。

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>

4

1 回答 1

0

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

html{height:fit-content;}

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

于 2021-12-17T21:10:54.257 回答