Как в ReactJS прописать отслеживание скрола для компонента?

Question

[Alex Krynytskyi]

Хочу задать цсс анимацию мягкого появления при скроле.
как правильно Задать прослушку скрола ?

Answer 1

[Даниил Сугоняев]

Я так понимаю, что проблема именно в том, что надо слушать скролл не window, а конкретного блока?
Тогда:
1. Получаем ссылку на конкретный react элемент - https://reactjs.org/docs/refs-and-the-dom.html
2. Дальше можно просто слушать событие скролла через нативный js - https://learn.javascript.ru/size-and-scroll
Только не забудьте удалить слушатель при размонтировании компонента.

Comments

[Alex Krynytskyi]

Скорее всего нужно слушать window как на скрол так и на onLoad
что бы понимать где элемент относительно окна и задавать анимацию.

ТОлько на реакте не совсем понимаю как правильно это сделать

[Даниил Сугоняев]

На реакте все тоже самое, такое же window, как и в обычном приложении. Если пишите на хуках то в useEffect (https://learn-reactjs.ru/core/hooks/effect-hook) вешаете слушатель, там же его удаляете. Ну и через стейт прикидываете нужные вам события

[n1ksON]

Не понял проблемы. Существует событие в React под названием onWheel, которое позволяет отслеживать прокрутку, как целого окна, так и блока с overflow: scroll. Или я не прав?