为什么 CSS 视差效果需要overflow-y？

如何解决为什么 CSS 视差效果需要overflow-y？

我创建了一个准系统视差演示。这很好用，你可以看到如果你运行下面的代码片段。但是，如果我删除以下 CSS 规则，它将停止工作：

main {
  overflow-y: auto;
}

当不需要垂直滚动时，为什么需要为垂直滚动条包含规则？

body {
    margin: 0;
  }

  main {
    width:100vw;
    height:100vh;
    perspective: 2px;

    /* overflow-y MUST be set to a certain value for parallax to work
      * WORKS:
      * + auto
      * + hidden
      * + overlay
      * + scroll
      * FAILS:
      * - clip
      * - inherit
      * - initial
      * - revert
      * - unset
      * - visible
    */
    overflow-y: auto;
  }

  div {
    position: absolute;
    top: 0;
    width: 99vw;
    height: 100%;
  }

  div:nth-child(1) {
    left: 0;
    background-color: #900;
  }

  div:nth-child(2) {
    left: 49.5vw;
    background: rgba(0,192,0.5);
    height: 80%;
    top: 10%;

    transform: translateZ(1px) scale(0.5);
    z-index: 1;
  }

  div:nth-child(3) {
    left: 99vw;
    background-color: #009;
  }

<body>
    <main>
       <div></div
      ><div></div
      ><div></div>
    </main>
  </body>

解决方法

当不需要垂直滚动时，为什么需要为垂直滚动条包含规则？

您需要垂直滚动，但您需要滚动 main 而不是屏幕。这里有一个小陷阱，因为删除 main 的滚动将使屏幕的默认滚动出现，您认为两者相同但不相同。我们需要滚动主视图，因为透视图是在那里定义的。

稍微减少宽度/高度，你会更好地理解。现在，如果您删除/添加溢出，您会发现它有所不同

body {
  margin: 0;
}

main {
  width: 90vw;
  height: 90vh;
  perspective: 2px;
  overflow-y: auto;
}

div {
  position: absolute;
  top: 0;
  width: 99vw;
  height: 100%;
}

div:nth-child(1) {
  left: 0;
  background-color: #900;
}

div:nth-child(2) {
  left: 49.5vw;
  background: rgba(0,192,0.5);
  height: 80%;
  top: 10%;
  transform: translateZ(1px) scale(0.5);
  z-index: 1;
}

div:nth-child(3) {
  left: 99vw;
  background-color: #009;
}

<main>
  <div></div>
  <div></div>
  <div></div>
</main>

基本上，具有透视图的元素需要滚动其内容才能看到效果。