html - 修复了滚动时移动设备上的元素高度问题/跳跃

Question

滚动时，我的移动设备底部的固定元素出现问题。看起来每次滚动时都会重新计算高度，因为移动设备上的文档高度增加了。

我认为原因是地址栏淡出并且文档视口(viewport)变大了。我进行了很多搜索并尝试了不同的解决方案，例如设置 height: 100%至html和 body但没有任何成功。

这是一个 GIF，显示我在 chrome 浏览器中在手机上的页面上滚动。顶部透明的东西是地址栏:



这是我的实际代码:

#wrapper {
  position: fixed;
  background: darkcyan;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  top: calc(100% - 100px);
  width: 100%;
}

#bottom-element {
  height: 50px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  height: 20px;
  border-bottom: 1px solid white;
}

#entries {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}

<div id="wrapper">
  <div id="title"></div>
  <div id="entries">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>
<div id="bottom-element"></div>

这个想法是从底部向上扩展 div 到 80%的屏幕。那么我该如何解决这个问题呢？我正在动态更改顶部值以扩展我的元素，所以如果有任何解决方案可以保持我的布局会很好。

Answer 1

问题是最高值(value)是一个计算。我已经修改了您上一个问题答案中的代码，以便以不同的方式完成(总是以不同的方式来实现相同的目标)。

此示例使用高度动画而不是顶部值。底部设置在包装器上，因此无论页面高度如何，它都会自行锚定。然后在需要时根据需要简单地调整高度

const title = document.getElementById("title");
const wrapper = document.getElementById("wrapper");

title.addEventListener("click", () => {
   wrapper.classList.toggle("expanded"); 
});

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 42px;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
  transition: height 250ms ease-in-out;
  height: 42px;
}

#wrapper.expanded {
    height: 85vh;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>