Как отловить скролл до нужного элемента на React?

Question

[deemaagog]

Привет! В приложении на react на странице есть длинный список элементов. Как можно отлавливать скролл до каждого элемента списка? Допустим скролл можно слушать так:

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

Но что дальше? как проверять что доскроллили до очередного элемента?

Answer 1

[Алексей Уколов]

как проверять что доскроллили до очередного элемента?

Сравнивать позицию скролла и этого элемента на странице. В чём вопрос-то конкретно?

Допустим скролл можно слушать так:

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

Лучше для этого использовать Intersection Observer там, где он доступен.

Comments

[deemaagog]

и этого элемента на странице

нет конкретного элемента, нужно обрабатывать скролл до каждого элемента списка

[Алексей Уколов]

А элемент списка - это не элемент?

[deemaagog]

я имел ввиду, что не знаю с каким элементом сравнивать позицию скролла. Получается нужно искать все элементы и сравнивать все?

[Алексей Уколов]

Зависит от вашей задачи. Вы можете в родительском компоненте получить позицию каждого элемента и работать уже с ней. А можете в дочерних компонентах следить за скроллом и сравнивать его позицию.