AOS Fade-In在视差滚动中失效问题求助

问题背景 #

使用AOS库实现滚动淡入效果时，给main元素设置overflow-x: hidden和overflow-y: auto后，滚动容器内的内容滚动时AOS效果完全无反应，仅在调整浏览器窗口大小的时候，淡入效果才会触发。

相关代码：

CSS #

main {
  height: 120vh;
  perspective: 2px;
  overflow-x: hidden; 
  overflow-y: auto;       
}

section {
  transform-style: preserve-3d;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.no-parallax {
   height: auto;
   background-color: #000000;
}

.no-parallax_footer {
  z-index: 999;
  width: 100%;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);
  background-size: 100%;
  z-index: 8;
}

HTML/JS #

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
    AOS.init({
    easing: 'ease-in-quad',
    });
</script>

问题原因 #

AOS默认监听window对象的滚动事件，但此处的滚动容器是main元素（而非整个窗口），导致AOS无法检测到main内部的滚动动作，只有窗口resize触发的全局重计算才会让效果生效。

可行解决办法 #

1. 初始化时指定滚动容器 #

在AOS初始化时，通过scrollContainer选项指定自定义滚动容器，让AOS监听该容器的滚动事件：

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
const mainContainer = document.querySelector('main');
AOS.init({
  easing: 'ease-in-quad',
  scrollContainer: mainContainer // 指定滚动容器
});
</script>

2. 手动监听滚动并强制刷新 #

如果上述方法仍不生效，可手动监听main的滚动事件，调用AOS.refresh()强制重新计算元素位置：

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
const mainContainer = document.querySelector('main');
AOS.init({
  easing: 'ease-in-quad',
  scrollContainer: mainContainer
});

// 监听滚动事件，触发AOS刷新
mainContainer.addEventListener('scroll', () => {
  AOS.refresh();
});
</script>

额外检查项 #

• 确保需要触发AOS效果的section元素上添加了data-aos属性，例如：<section data-aos="fade-in">
• 确认main元素的高度设置合理，容器内内容高度超过容器高度，保证存在可滚动区域

内容的提问来源于stack exchange，提问作者Jeffrey Generalao