Intersection Observer дает бесконечный цикл ответов

Question

Intersection Observer дает бесконечный цикл ответов

Рейтинг: 3Ответов: 0Опубликовано: 14.05.2023

помогите плз с проблемой. Недавно начал изучать Intersection Observer API и столкнулся с проблемой бесконечного получения ответа. Ситуация такая, я прокручиваю страницу, дохожу до секции, она появляется, но если прокрутить в самый низ секции, то можно словить баг, что на каком-то моменте у меня начинает исчезать и появляться секция (opacity: 0 => opacity: 1 => opacity: 0 => opacity: 1).

Если использовать консоль и посмотреть на вызов callback-функции (вывожу console.log(entry)), то можно заметить, что я получаю бесконечное количество вызовов, но при этом экран у меня стоит статично (ничего не трогаю). По логике секция должна пропасть, но у меня циклится вызов, поэтому экран то появляется, то исчезает.

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

const allSections = document.querySelectorAll('.section');

const appearanceSection = function (entries) {
  entries.forEach(entry => {
    const element = entry.target;
    if (entry.isIntersecting) {
      element.classList.remove('section--hidden');
    } else {
      element.classList.add('section--hidden');
    }
  });
};

const observerForSection = new IntersectionObserver(appearanceSection, {
  root: null,
  threshold: 0.2,
});

allSections.forEach(e => {
  e.classList.add('section--hidden');
  observerForSection.observe(e);
});

/* Основные элементы */
.section {
  padding: 15rem 3rem;
  border-top: 1px solid rgb(213, 213, 213);

  transition: transform 1s, opacity 1s;
}

.section--hidden {
  opacity: 0;
  transform: translateY(9rem);
}

.empty {
  min-height: 100vh;
}

<div class="empty"></div>

<section class="section" id="section--1">
  <div class="section__title">
    <h2 class="section__description">Услуги</h2>
    <h3 class="section__header">Все необходимое в современном банке.</h3>
  </div>

  <div class="services">
    <img
      src="img/stock-exchange-lazy.jpg"
      data-src="img/stock-exchange.jpg"
      alt="Числа на экране"
      class="services__img lazy-img"
    />
    <div class="services__feature">
      <div class="services__icon">
        <svg>
          <use xlink:href="img/icons.svg#icon-monitor"></use>
        </svg>
      </div>
      <h5 class="services__header">100% цифровой банк</h5>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et
        feugiat orci. Integer ut mauris nec sapien viverra condimentum sed
        at eros. Donec vitae odio non mauris convallis congue. Quisque id
        rhoncus elit. Nam accumsan facilisis felis.
      </p>
    </div>

    <div class="services__feature">
      <div class="services__icon">
        <svg>
          <use xlink:href="img/icons.svg#icon-trending-up"></use>
        </svg>
      </div>
      <h5 class="services__header">Наблюдай за ростом твоих денег</h5>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et
        feugiat orci. Integer ut mauris nec sapien viverra condimentum sed
        at eros. Donec vitae odio non mauris convallis congue. Quisque id
        rhoncus elit. Nam accumsan facilisis felis.
      </p>
    </div>
    <img
      src="img/business-lazy.jpg"
      data-src="img/business.jpg"
      alt="Возрастающий тренд на графике"
      class="services__img lazy-img"
    />

    <img
      src="img/payment-lazy.jpg"
      data-src="img/payment.jpg"
      alt="Кредитная карта"
      class="services__img lazy-img"
    />
    <div class="services__feature">
      <div class="services__icon">
        <svg>
          <use xlink:href="img/icons.svg#icon-credit-card"></use>
        </svg>
      </div>
      <h5 class="services__header">Бесплатная дебетовая карта включена</h5>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et
        feugiat orci. Integer ut mauris nec sapien viverra condimentum sed
        at eros. Donec vitae odio non mauris convallis congue. Quisque id
        rhoncus elit. Nam accumsan facilisis felis.
      </p>
    </div>
  </div>
 </section>
 <div class="empty"></div>

Можете проверить, просто прокрутите вниз секции и увидите, что она начинает дергаться.

Помогите, пожалуйста, если кто-то знает как решить эту проблему.

javascript intersection-observer observer

Источник: Stack Overflow на русском

Intersection Observer дает бесконечный цикл ответов

Ответы