Javascript 如何使用scroll inside overflow激活动画：scroll；？

我正在制作一个React proyect，我正在使用Animate.css，我想在屏幕上的元素出现在父元素中时激活动画，父元素有一个溢出。问题是我建立的所有依赖项和方法都在检测窗口的滚动事件，而我的元素没有出现。我的代码：

这是父元素：

const WhiteCanvas = ({ children }) => (
    <div className='whiteCanvasContainer'>
      <div className='allCanvas'>
        {children}
      </div>
    </div>
);

constwhitecanvas=（{children}）=>(
{儿童}
);

WhiteCanvasContainer类有一个溢出。当动画出现在画布中时，如何激活它们？其他的事情是，他们是分开的组件，所以我不知道。我已经测试了Wow.js，在滚动上反应，在屏幕上反应，还有很多其他的，我还尝试使用IntersectionObserver和Jquery。有人知道这个问题的解决办法吗？我怎么能做到