How to remove elements from DOM which are not on viewport currently?

I am making an infinite image gallery in react taking data from API and when the user scrolls too much on the bottom I don’t want the previous images to stay on dom. Is there any simple thing for that? as I studied React-Virtualized and it looks complex to implement.

Any ideas or library?
Thanks for reading

  • check which elements are above your current position
  • remove them

But:

  • when you remove elements, the elements below move up (vs. hide)
  • what happens when users scroll back up?