时间戳

首页 > 解决方案 > 内容溢出时显示滚动条

javascript - 内容溢出时显示滚动条

问题描述

我正在尝试应用这样的动画：

页面加载，一秒钟后，页面底部缓慢显示一个框，我通过添加一个名为的类来实现这一点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>

标签： javascripthtmlcss

解决方案

是的，overflow:visible就像overflow:hidden在视口/页面最底部的绝对定位元素上一样。简单的解决方案是给overflow-y:auto..height

推荐阅读