html - 动画时出现垂直滚动条

Question

我正在尝试为 div 设置动画，除了出现不需要的垂直滚动条外，一切正常。我确实搜索了解决方案，但我只找到了 body,html{overflow:hidden} 这有效，但问题是其他元素也被隐藏了。这是我的代码:-

.main-content {
  position: relative;
  height: 500px;
}

.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-container ul {
  list-style: none;
}
.box-container .box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: pink;
  border-radius: 50%;
  opacity: 0;
}

.animate1 {
  animation: animate .5s ease-in-out forwards;
}

.animate2 {
  animation: animate .5s ease-in-out .5s forwards;
}

.animate3 {
  animation: animate .5s ease-in-out 1.0s forwards;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(1000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
p {
  max-width: 80%;
  margin: 0 auto;
}

<div class="main-content">
    <div class="box-container">
      <ul class="list-unstyle list-inline">
          <li class="box animate1"></li>
          <li class="box animate2"></li>
          <li class="box animate3"></li>
      </ul>
    </div>
</div>
<div>
 <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

您可以使用 calc(100vh - 250px)，而不是从 1000px 开始动画，这些值基于您给定的值。

球从页面底部移动，因此没有滚动条

示例片段:

.main-content {
  position: relative;
  height: 500px;
}
.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-container ul {
  list-style: none;
}
.box-container .box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: pink;
  border-radius: 50%;
  opacity: 0;
}
.animate1 {
  animation: animate .5s ease-in-out forwards;
}
.animate2 {
  animation: animate .5s ease-in-out .5s forwards;
}
.animate3 {
  animation: animate .5s ease-in-out 1.0s forwards;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(calc(100vh - 250px));
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
p {
  max-width: 80%;
  margin: 0 auto;
}

<div class="main-content">
  <div class="box-container">
    <ul class="list-unstyle list-inline">
      <li class="box animate1"></li>
      <li class="box animate2"></li>
      <li class="box animate3"></li>
    </ul>
  </div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>