Forem: Improve performance of viewport element detection

[pavelloz]

As per discussion at https://github.com/thepracticaldev/dev.to/pull/4279 im opening this for the future performance optimization in this area.

The problem of accessing dom properties and layout trashing because of that is pretty well described here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

And as you can see in the PR there is use of some of those properties.

Im not sure how the system works, but if it is run on scroll event (especially if not debounced) then it can become a big issue very quickly, or become an issue when you add/modify your js to do more. Additionally it becomes a little bit harder to find, as in the future you will be editing some other part of the system and suddenly it will show some signs of jank on some devices, and creep upwards (on the device power scale).

Because the PR uses those properties to detect if element is in a certain position, i suggested using a newer API called IntersectionObserver which doesnt do such things.

There is excellent introduction to this API by Pawel Grzybek: https://pawelgrzybek.com/the-intersection-observer-api-explained/

[jack-lewin]

Hey 👋 I'm happy to take this one!