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

Question

我创建了一个准系统视差演示。这工作正常，如您所见，如果您运行下面的代码片段。但是，如果我删除以下 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,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>

Answer 1

Why is it necessary to include a rule for a vertical scrollbar, when there is no need to scroll vertically?

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

稍微减少width/height，你会更好地理解。现在如果你 remove/add 溢出你会发现它是不同的

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, 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>

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

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

Why is overflow-y required for a CSS parallax effect?

css

overflow

parallax