function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Leonardi KohLeonardi Koh 

Practical method to check if a lightning component is visible in view port?

With regular webpage and javascript, the old method i can recall for checking if a certain element is within the user's view port (to ensure that the element is actually visible by the user before performing certain css effects) involve using getBoundingClientRect.

Then there's the new method involving IntersectionObserver.

From what i understand, i cannot utilize IntersectionObserver in Lightning Component as i recall that it is not currently supported by the underlying secure window in Lightning Component (please correct me if i am wrong there)...

So my assumption is that currently we only can use getBoundingClientRect to ascertain the position of our element in Lightning Component.

But i noticed that when i used getBoundingClientRect to check my element's position... the value does not appear to be accurate.

To be more precise, in my case said lightning component was placed inside a page via Lightning Community Builder within certain layout, and it appears that the position value returned is the position relative to the parent element and NOT the position of the element relative to the user's view port.

So what would be the best way to do this currently?