AOS.js动画时隐藏滚动条（overflow:hidden）的实现方案

你找到的AOS.js事件代码正好能解决这个问题，这两个事件的作用很明确：

• aos:in：元素开始执行进入动画时触发
• aos:out：元素开始执行退出动画时触发

我们可以利用这两个事件，仅在动画执行期间给目标元素（body或父容器）添加overflow: hidden，动画结束后立刻移除——这样既避免了动画时元素超出视口导致滚动条出现，又不会影响窗口调整时的正常滚动功能。

具体实现步骤 #

1. 定义CSS控制类
   先写一个专门控制溢出的类，方便通过JS动态切换：

.overflow-hidden {
  overflow: hidden;
}

2. 编写事件监听代码
   把这段代码放在AOS初始化之后（或者页面底部的<script>标签里，确保DOM已加载完成）：

// 先初始化AOS（如果还没配置的话）
AOS.init({
  duration: 1000 // 根据你的需求调整动画时长
});

// 元素进入动画时，隐藏溢出
document.addEventListener('aos:in', () => {
  // 如果是特定父容器而非body，替换成document.querySelector('.你的父容器类名')
  document.body.classList.add('overflow-hidden');
});

// 元素退出动画时，恢复溢出设置
document.addEventListener('aos:out', () => {
  document.body.classList.remove('overflow-hidden');
});

进阶：针对特定元素的动画 #

如果只想在特定元素执行动画时隐藏溢出，可以利用事件的detail参数（该参数包含当前动画的DOM元素）做精准判断：

document.addEventListener('aos:in', ({ detail }) => {
  // 只对带有特定类的元素动画生效
  if (detail.classList.contains('target-animate-element')) {
    document.body.classList.add('overflow-hidden');
  }
});

document.addEventListener('aos:out', ({ detail }) => {
  if (detail.classList.contains('target-animate-element')) {
    document.body.classList.remove('overflow-hidden');
  }
});

这样设置后，只有带有target-animate-element类的元素执行动画时，才会临时隐藏body的溢出，其他元素动画时不会影响页面滚动。

内容的提问来源于stack exchange，提问作者Katarina Perović