在具有溢出的div中使用AOS（滚动动画）

Question

当我向下滚动到它们时，我真的希望某些东西可以在屏幕上生成动画，就像它们在这里一样...

https://michalsnik.github.io/aos/

问题是我的网站实际上嵌套在一个名为“ main-content”的div中，侧边栏和顶部栏分别有div。

从这个问题和答案中可以看出，无法在嵌套滚动器中实现我想要的功能，但这是3年前的事情，我只是想知道是否存在使用aos或wow.js或类似方法的潜在解决方法。

我试过几次，没有运气，但我觉得必须有一种方法来实现这一目标。

提前致谢！

Answer 1

IntersectionObserver使这种行为举止易于使用原始JavaScript来实现。 这是一个相当新的API，但是有一个polyfill 。

如果要跟踪自己的滚动容器而不是文档，可以将root设置为其他名称。

 // Find the item we want to animate on scroll var target = document.querySelector('#target'); var targetActiveClass = 'target-is-active'; // Call this function when it enters/leaves the viewport var callback = function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add(targetActiveClass); } else { entry.target.classList.remove(targetActiveClass); } }); }; // Create our observer var observer = new IntersectionObserver(callback, {threshold: 0}); observer.observe(target); 

 /* Our target, hidden by default */ #target { align-items: center; background-color: #000; color: #fff; display: flex; justify-content: center; height: 100px; margin-bottom: 150vh; margin-top: 150vh; opacity: 0; transform: translateX(-100%); transition: opacity .25s ease-in-out, transform .25s ease-in-out; width: 200px; } /* Apply this class when #target enters/leaves the viewport */ #target.target-is-active { opacity: 1; transform: none; } 

 <p>Scroll!</p> <div id="target">Howdy!</div>