确定何时在滚动父容器中查看子容器的百分比

Question

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.

Answer 1

Basically, you want to take the current position of the slide container, and divide that by the width of the parent container.

Here's what that would look like: Math.round(Math.abs(currentPosition) / containerWidth);

The lowest value possible is zero, which would correspond to the first slide.

See my comment below for an example of this in action.

Answer 2

You can calculate the percentage of a child visible with a function like this:

function calculateVisiblePercentage(childLeft, childWidth, containerOffset, containerWidth){

  // Position of the left side of the child, 
  // or the container left side if the child 
  // starts before the left side of the container
  var x0 = Math.max(containerOffset, childLeft);

  // Position of the right side of the child,
  // or the container right side if the child
  // ends after the right side of the container
  var x1 = Math.min(containerOffset + containerWidth, childLeft + childWidth);

  if (x1 < x0){
    // It's not visible
    return 0;
  }

  var pixelsVisible = x1 - x0;

  // Percentage
  return pixelsVisible * 100 / childWidth;
};

Where childLeft is the position of the child's left side. For example, if the children width is 100px, it would be 0 for the first child, 100 for the second, etc. And where containerOffset is the position / scroll of the container.

You can see a basic working example in this JSFiddle .