TranslateZ在html容器元素的底部添加额外的空白

Question

我正在尝试创建一种视差效果，其中不同的元素通过应用3-d变换以不同的速度滚动

问题

我有一个类别为parallax的容器。每当我在其中添加一个包含在Z坐标处平移的多层的div时，在容器的底部都会添加一个parallax类的额外空格

如何删除多余的空白？

代码

body {
  margin: 0;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;
}

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
}

.parallax__layer--base {
  transform: translateZ(0);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>

Answer 1

将overflow: hidden;添加到.parallax__group，空格就消失了。

body {
  margin: 0;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;
}

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
}

.parallax__layer--base {
  transform: translateZ(0);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>

Answer 2

我删除了perspective属性并添加了一些填充。 希望这会有所帮助！

body {
  margin: 0;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
  padding-top: 50px;
}

.parallax__layer--base {
  transform: translateZ(0px);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>