Detect what percentage of viewport is obstructed b

2019-09-10 19:24发布

问题:

What I'd like to do, if it's technically possible, is leverage JavaScript (frameworks such as jQuery are totally fine, too), to determine what percentage of an inactive browser window might still be in view.

For example, in the image below, imagine I'm working on a project for CNN.com. In this scenario, I know I can use window.onfocus and window.onblur to determine whether the window marked as Background window is in focus or not.

[![enter image description here][1]][1]

However, I'm interested in measuring what percentage of the viewport/page for the Background window is visible to the end user, and/or what percentage of the page for the Background window is not visible. Or, an alternative approach could also be to simply determine whether an element (by ID) is in view on the Background window or it's obstructed by any foreground windows.

After extensive Googling and Stack Overflow searching, I'm not finding a solution for what I'm trying to achieve. This could obviously be due to technical impossibility, but I wanted to ensure I've left no stone unturned in troubleshooting.

The use case here is that I'd like to be able to pause videos and animations, etc. when a given element is not visible on the page -- not just when the window is not active at the moment, since users can often have windows arranged side-by-side, and might want to watch a video while multi-tasking. even though the window might be active at a given moment. Conversely, if a window is covered up, the desire here (for business purposes) is to pause the video, so we are not serving videos (or video ads) when a player is out of view.