AOS滚动动画库导致HTML文档溢出问题的解决方法

我在用**Animation on Scroll（AOS）**滚动动画库，它的动画效果很出色，但我的项目里出现了HTML文档溢出的问题，而且只有左滑或左淡入类的动画才会触发这个问题。

问题截图：

项目中使用Handlebars的HTML代码如下：

{{#each projeler as |proje|}} 
<div class="container"> 
  {{#each projeler as |proje|}} 
  <main> 
    <article class="postcard dark orange"> 
      <a class="postcard__img_link" href="/projeler/{{proje.id}}"> 
        <img class="postcard__img" src="../images/randomForLibrary/{{proje.proje_resmi_url}}" alt="Image Title" /> 
      </a> 
      <div class="postcard__text"> 
        <h1 class="postcard__title blue"><a href="/projeler/{{proje.id}}">{{proje.proje_ismi}}</a></h1> 
        <div class="postcard__subtitle small"> 
          <time> 
            <i class="fa-regular fa-calendar-days"></i> 
            <span class="date">{{proje.proje_eklenme_tarihi}} 
          </time> 
        </div> 
        <div class="postcard__bar"></div> 
        <div class="postcard__preview-txt">{{proje.proje_aciklamasi}}</div> 
        <ul class="postcard__tagbox"> 
          <li class="tag__item"><i class="fa-solid fa-clover"></i> {{proje.proje_kategorisi}}</li> 
          {{#ifCond proje.cito_adayi '==' 'Evet'}} 
          <li class="tag__item"><i class="fa-solid fa-paperclip"></i>CITO ADAYI</li> 
          {{/ifCond}} 
          <li class="tag__item play orange"> 
            <span title="Profil Görüntüle" class="project_owner"><i class="fa-solid fa-user"></i><a class="text-link" href="/profil/{{email}}"> {{proje.projeyi_ekleyen}}</a></span> 
          </li> 
        </ul> 
      </div> 
    </article> 
  </main> 
  {{/each}} 
</div> 

解决方案 #

这种溢出问题通常是AOS执行左向动画时，元素被定位到视口左侧之外，导致页面出现横向滚动条。可以通过以下方式解决：

• 全局隐藏横向溢出
  在CSS中添加：

  body {
    overflow-x: hidden;
  }
  

  直接强制隐藏页面横向溢出内容，不影响纵向滚动。

• 精准限制容器溢出
  给应用AOS动画的元素容器添加溢出隐藏，比如你的.container或<main>标签：

  .container, main {
    overflow-x: hidden;
  }
  

  只限制动画元素所在容器，避免影响全局布局。

• 调整AOS动画配置
  初始化AOS时修改参数，减少元素向左偏移的范围：

  AOS.init({
    offset: 120, // 调整触发动画的偏移量
    duration: 600, // 缩短动画时长，缩小元素偏移范围
    once: true // 只触发一次动画，避免重复偏移
  });
  

另外，你的Handlebars代码嵌套了两层{{#each projeler}}，会导致内容重复渲染，可能加重布局问题，建议修正这个循环嵌套错误。

内容的提问来源于stack exchange，提问作者Tolkienist Coder