How I could check whether the view port has reached a certain HTML Element?

Question

I have a styled component div that contains an image. I want to apply animation on the image, when the user reaches the img element while scrolling downwards. Please Note that I'm using React and more specifically Styled Components in my project.

Thanks alot.

Does this answer your question? [Detecting when user scrolls to bottom of div with React js](https://stackoverflow.com/questions/45585542/detecting-when-user-scrolls-to-bottom-of-div-with-react-js) — Abbas Hosseini, Dec 30 '20 at 16:08
Actually that's a bit different I want to check when the image first appears in the viewport on scrolling in addition i want to stay away from adding on scroll as event listener cause it leads to performance issues — , Dec 30 '20 at 16:42

score 0 · Accepted Answer · answered Dec 30 '20 at 17:59

You can use the intersection observer API. It overcomes the performance issues of using a scroll listener, but it is not supported in IE or old browsers.

There is a nice wrapper for React: react-intersection-observer

Here is an example with styled components:

How I could check whether the view port has reached a certain HTML Element?

1 Answers1