How to get visible elements in a scrollable DIV using React?

Question

HTML

There is a container DIV with messages, I need to do the following.
1. Get the last visible message in the container.
2. Read its identifier.
4 Mark all messages before it as read.

Point 1 causes the main difficulty for me. I will need to receive this message every time the container is scrolled in order to send a request to the server that the message has been read.
What React or JS tools will help me do this?
Container DIV and message components are functional React components.