Html CSS视差-如何设置高度和滚动范围

我一直在玩，这真是太棒了

我搞不清楚的是，可滚动区域的总高度是如何控制的，视差层的位置，或者它们可以滚动多远的范围

例如，查看此示例：

html:

---

可滚动区域的总高度似乎为200vh。这是如何确定的？这是缩放和平移属性的结果吗？同样，是什么导致了.base和.back div之间的间距？

如果我没记错的话，总高度只是如果层在屏幕上是可见的，那么整个层就会被渲染，层的最大大小是100vh，因此总高度实际上更接近（但略低于）300vh是合乎逻辑的。对于下面、屏幕上和上面。transform属性使用比例因子处理“层”的“深度”，该比例因子是一个反比（比例1为全屏，比例2为半屏等），但不描述示例中的内容。300vh是有意义的——但是在一个看起来只有200vh的空间中滚动的基本层（在这个意义上，当滚动到上面时，它下面有100vh）。对于.deep层，向上滚动时，div下方只有约30vh的空白空间。看起来他们应该是一致的。。。我正试图找出控制它们的规则，因为它们实际上不是。这是一个三维空间，使用2D（正交）相机角度。这意味着离相机的距离不会影响对象（背景）的“比例”，仅显示项目与相机之间的距离。相机是浏览器。我不会对第三个空间如何呈现的一般理论感到困惑。我想确定控制这些层和空间的特定属性。使用标准定位和高度属性不会以正常方式改变行为。

<div class="parallax">
  <div class="parallax__layer parallax__layer--back c1">
    back c1
  </div>
  <div class="parallax__layer parallax__layer--base c2">
    base c2
  </div>
   <div class="parallax__layer parallax__layer--deep c3">
    deep c3
  </div>
</div>

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100vh;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}

.c1 {
    background-color: red;
}
.c2 {
    background-color: blue;
}
.c3 {
    background-color: yellow;
}