Determine when a percentage of a child container is in view in a scrolling parent container

I've been playing around with this on paper for an hour or two now but seem to be getting a bit stuck. Given the scenario where I have a parent container which is 100% wide (fits to it's parent width which can be any size in pixels) that contains child containers that are a percentage of it's size wide (for this example 90%), how do I determine when a child container is a percentage amount in view (say 80%)? The end result of this is to determine what child container you're currently at, say 1/4 or 3/4 etc. The amount of child containers is variable, it may sometimes be 1, it may be 100.

The child containers width of it's parent can vary, but they will always be the same for every child, for example, all 90% of the parent container, or all 100% width.

I've drawn a rough diagram to hopefully make this a bit easier to understand.

So in the example image above, we'd currently be at slide 1 of 3. But if we scrolled to the right and 80% of the green container was now in view, we'd be on slide 2 of 3 etc. The black container in this case being the parent.

The resulting mathematical solution will be implemented in JavaScript.