Javascript: How to know if a DOM element is in scope?

Question

JavaScript

I am writing here because I believe in Habr.
When creating an iFrame application for Vkontakte, I ran into a problem: I can't revise endless scroll .
Those. in the first approximation - when the scroll is placed on my iFrame - everything works great.
But when submitting the application for approval, I received a response from the administration - “increase the height of the iframe in order to avoid scrolling”. Naturally, it will not work to remove the scroll - then you will have to use pagination, which you want to avoid.
Exit - use the parent window scroll to display. And here's the problem: According to browser security policy, iframe and frame are not allowed to access any parent elements unless the domains are the same.
Those. I can't even access the window.parent and top objects.

The Vkontakte API allows me to determine the parent window's scroll position using the scrollTop event: "Raises the onScrollTop event with the current scroll position of the VK window." Unfortunately, knowing the position of the scroll is not enough - there is no information about the total height of the window.

After playing around for a while, I didn't find a solution. Therefore, I decided to approach the problem from the other side - perhaps there is a mechanism for determining whether the DOM element is visible to the user?

All solutions found relied on the scrollPosition of the container. Again, it doesn't fit.

Any ideas?

PS: thanks for reading)

Answer 1

>> Unfortunately, knowing the position of the scroll is not enough - there is no information about the total height of the window.
So it seems like window.innerHeight is just talking about the height of the window. So having the coordinates of the position of the element in the document, the position of the scrolls and the height of the window, it is quite possible to determine whether the object is visible or not.

Answer 2

There is a jquery viewport checker plugin

Answer 3

Type in Google: javascript check DOM element visibility
The first links will contain examples of solving this problem.