Использование AOS (анимация при прокрутке) внутри div с переполнением

Question

Мне бы очень хотелось, чтобы некоторые вещи анимировались на экране, когда я прокручивал до них, как они делают здесь...

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

Проблема в том, что мой сайт на самом деле вложен в div, называемый main-content, с отдельными div для боковой и верхней панелей.

Из этого вопроса и ответа следует, что невозможно достичь того, чего я хочу, во вложенном скроллере, но это было 3 года назад, и мне просто интересно, существует ли потенциальный обходной путь с использованием aos или wow.js или чего-то подобного.

Я попробовал пару, и мне не повезло, но я чувствую, что должен быть способ достичь этого.

Заранее спасибо!

Answer 1

IntersectionObserver позволяет легко реализовать это детское поведение, используя ванильный JavaScript. Это довольно новый API, но есть полифилл.

Если вы хотите отслеживать свой собственный контейнер прокрутки вместо документа, вы можете установить 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>