在溢出的 div 中使用 AOS（滚动动画）答案

【问题标题】：Using AOS (animate on scroll) inside a div with overflow在溢出的 div 中使用 AOS（滚动动画）
【发布时间】：2019-02-28 22:21:55
【问题描述】：

当我向下滚动到某些东西时，我真的很想在屏幕上制作动画，就像他们在这里做的那样......

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

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

从this question and answer 看来，它不可能在嵌套滚动器中实现我想要的，但这是 3 年前的事了，我只是想知道是否有使用 aos 或 wow.js 或其他东西的潜在解决方法类似。

我尝试了几次，但都没有运气，但我觉得必须有办法实现这一点。

提前致谢！

【问题讨论】：

这些库在窗口滚动时进行动画处理，并使用有关窗口滚动位置的信息进行动画处理。您可以使用一种可能的解决方法。如果您将要滚动的内容放置在 iframe 中，则可以将该 iframe 放置在嵌套的 div 中。
:( 这就是我希望我不会得到的答案。我想知道是否有一种方法可以将它从窗口设置到 div，或者它可能不会那样工作。谢谢

标签： javascript html css animate.css animate-on-scroll

【解决方案1】：

IntersectionObserver 使这个行为孩子很容易使用原生 JavaScript 实现。这是一个fairly new 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>

【讨论】：