Как получить видимые элементы в DIV с прокруткой, используя React?

Question

[Denis Korneev]

Есть контейнер DIV с сообщениями, мне нужно сделать следующее.
1. Получить последнее видимое сообщение в контейнере.
2. Прочитать его идентификатор.
4 Пометить все сообщения до него прочитанными.

Основную сложность у меня вызывает именно пункт 1. Мне нужно будет получать это сообщение каждый раз когда контейнер прокручивается чтобы отправлять запрос на сервер о том что сообщение было прочитано.
Какие средства React или JS помогут мне это сделать?
Контейнер DIV и компоненты сообщений являются функциональными компонентами React.

Answer 1

[profesor08]

Создаешь ссылку на элемент сообщения useRef, потом на элемент контейнера, потом проверяешь, если сообщение во вьпорте контейнера.

Comments

[Denis Korneev]

Как создать ссылку если заранее не знаешь какое сообщение окажется последним видимым в контейнере с прокруткой?
Создать ссылки на все сообщения и проверять каждое на видимость в контейнере при каждой прокрутке?
И как проверить видимость?

[profesor08]

Orland25565, да, на все.