Question

我正在尝试应用看起来像这样的动画：

页面加载完毕，一秒钟后，页面底部缓慢显示一个框，我通过添加名为height的类（您在下面的代码中看到）实现了这一点。

问题是该框将包含一些由用户输入的内容，因此其高度将增加以能够显示用户输入的所有内容，但是当内容通过提供的内容时不会发生这种情况高度（来自height类的高度）溢出内容将被隐藏。

我不想让滚动条显示这种行为。

这是可执行文件摘录：https://codepen.io/Amoocris/pen/vPWOpX

setTimeout(

  function() {
    document.querySelector(".plansBackground").classList.add("height");
  }, 1000

);

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-weight: bold;
}

.backIMg {
  background-color: rgb(155, 230, 170);
  height: 100vh;
  width: 100vw;
}

.plansBackground {
  background-color: rgba(255, 255, 255, .5);
  width: 100vw;
  height: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: 1s;
  color: black;
}

.height {
  height: 25vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="backIMg">


  <div class="plansBackground">
    <div class="Plans-container" data-aos="fade-up">
      <div class="background-extand">

        <h1 class="day">
          Monday
        </h1>

      </div>



    </div>
  </div>

</div>

Answer 1

只需添加ti CSS

.plansBackground {
     overflow-y: auto;
}

Example

Answer 2

是的，overflow:visible在视口/页面最底部的绝对定位元素上的作用类似于overflow:hidden。简单的解决方案是将overflow-y:auto赋予.height。

内容溢出时显示滚动条

2 个答案: