AOS Fade-In not working on parallax scrolling

Question

AOS fade in should work on scroll, but setting overflow-x and y interferes with the effect. Nothing happens on scroll, fade in only works when i resize the window. I'm using this library: AOS Library

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;

}

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

Does someone know how to work around this problem?

I found the same problem here, but it doesn't work on mine.

Answer 1

Solution is to add: <script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>