确定滚动父容器中{child}容器的百分比何时处于视图中

Question

我现在已经在纸上玩了一两个小时，但似乎有点卡住了。鉴于我有一个100％宽的父容器（适合它的父宽度，可以是任何大小，以像素为单位）的场景，它包含子容器，它的大小是其宽度的百分比（对于这个例子90％），如何确定子容器在视图中的百分比量（比如说80％）？这样做的最终结果是确定您当前所处的子容器，例如1/4或3/4等。子容器的数量是可变的，有时可能是1，可能是100。

它的父容器宽度可能会有所不同，但对于每个子容器，它们总是相同的，例如，父容器的所有90％，或者所有100％宽度。

我已经绘制了一张粗略的图表，希望能让它更容易理解。

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

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

Answer 1

基本上，您想要获取幻灯片容器的当前位置，并将其除以父容器的宽度。

这是什么样子：    Math.round（Math.abs（currentPosition）/ containerWidth）;

可能的最低值为零，这与第一张幻灯片相对应。

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

Answer 2

您可以使用以下函数计算可见儿童的百分比：

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

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

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