Что можно изменить, чтобы этот код работал со всеми элементами раздела - PullRequest
Новая
       34

Что можно изменить, чтобы этот код работал со всеми элементами раздела

1 голос
/ 13 апреля 2020

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

Я пытаюсь добавить анимацию в каждый раздел, пока пользователь прокручивает страницу, вверх или вниз. 

import React from 'react';

const EffectComponent = () => {
  const vpPlitz = (element) => {
    const scroll = window.scrollY || window.pageYOffset;
    const boundsTop = element.getBoundingClientRect().top + scroll;

    const viewport = {
      top: scroll,
      bottom: scroll + window.innerHeight,
    };

    const bounds = {
      top: boundsTop,
      bottom: boundsTop + element.clientHeight,
    };

    return (
      (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
      (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
    );
  };

  // Usage.
  document.addEventListener('DOMContentLoaded', () => {
    const answer = document.querySelector('section');

    const handler = () => {
      return vpPlitz(answer)
        ? answer.classList.add('section-animated')
        : answer.classList.remove('section-animated');
    };

    handler();
    window.addEventListener('scroll', handler);
  });

  return null;
};

export default EffectComponent;

ОБНОВЛЕНИЕ:

Благодаря помощи Тет я смогла изменить Реакт. Я публикую это, если кто-то может использовать это. 

import { useEffect } from 'react';

const EffectComponent = () => {
  useEffect(() => {
    const answers = document.querySelectorAll('section');

    const handler = (answer) => {
      return vpPlitz(answer)
        ? answer.classList.add('section-animated')
        : answer.classList.remove('section-animated');
    };

    window.addEventListener('scroll', () => {
      answers.forEach((answer) => handler(answer));
    });
  }, []);

  const vpPlitz = (element) => {
    const scroll = window.scrollY || window.pageYOffset;
    const boundsTop = element.getBoundingClientRect().top + scroll;

    const viewport = {
      top: scroll,
      bottom: scroll + window.innerHeight,
    };

    const bounds = {
      top: boundsTop,
      bottom: boundsTop + element.clientHeight,
    };

    return (
      (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
      (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
    );
  };

  return null;
};

export default EffectComponent;```

1 Ответ

1 голос
/ 13 апреля 2020

querySelectorAll () возвращает массив элементов, поэтому, если вы хотите добавить или удалить классы для каждого элемента, вам нужно l oop через массив. Например, 

    const answers - document.querySelectorAll('section');
    const handler = (answer) => {
       return vpPlitz(answer)
            ? answer.classList.add('section-animated')
            : answer.classList.remove('section-animated');
    };
    window.addEventListener('scroll',() => {
       answers.forEach(answer => handler(answer));
   })

вы также должны удалить прослушиватели событий, когда компонент отключен. Вы можете использовать прослушиватель событий: beforeunload . В нем запустите ту же функцию, что и для DOMContentloaded, но замените window.addEventListener('scroll', handler(answer) на window.removeEventListener('scroll', handler(answer).

...