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

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.

我已经在纸上玩了一两个小时,但似乎有点卡住了。鉴于我有一个100%宽的父容器(适合它的父宽度,可以是任何大小,以像素为单位)的场景,它包含子容器,它的大小是其宽度的百分比(对于此示例为90%),如何做我确定子容器在视图中的百分比量(比如说80%)?这样做的最终结果是确定您当前所处的子容器,例如1/4或3/4等。子容器的数量是可变的,有时可能是1,可能是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.

它的父容器的子容器宽度可以变化,但它们对于每个子容器总是相同的,例如,父容器的所有90%,或者所有100%宽度。

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.

因此,在上面的示例图片中,我们目前处于幻灯片1的3中。但是如果我们向右滚动并且80%的绿色容器现在在视图中,我们将在幻灯片2中的3等。黑色在这种情况下,容器是父容器。

The resulting mathematical solution will be implemented in JavaScript.

由此产生的数学解决方案将在JavaScript中实现。

2 个解决方案

#1

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.

其中childLeft是孩子左侧的位置。例如,如果子宽度为100px,则第一个子节点为0,第二个子节点为100,等等。其中containerOffset是容器的位置/滚动。

You can see a basic working example in this JSFiddle.

你可以在这个JSFiddle中看到一个基本的工作示例。

#2

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);

这是什么样的: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.

请参阅下面的评论,了解此操作的示例。

#1