Исправлена ​​проблема высоты элемента / прыжки на мобильных устройствах при прокрутке

Question

У меня проблема с моим фиксированным элементом в нижней части моего мобильного устройства при прокрутке. Похоже, что высота get пересчитывается при каждой прокрутке, потому что высота документа увеличивается на мобильных устройствах.

Я думаю, причина в том, что адресная строка исчезает, а область просмотра документа становится больше. Я много искал и пробовал разные решения, такие как установка 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>

Идея состоит в том, чтобы сделать расширяющийся элемент снизу до 80% экрана. Итак, как я могу исправить эту проблему? Я динамически меняю верхнее значение, чтобы расширить свой элемент, поэтому, если есть какое-то решение, которое я могу сохранить, мой макет был бы хорош.

Answer 1

Проблема в том, что верхним значением является расчет. Я изменил код в ответе на предыдущий вопрос, чтобы он выполнялся другим способом (всегда по-разному, чтобы достичь одного и того же).

В этом примере вместо верхнего значения используется анимация высоты. Дно установлено на обертку, поэтому оно привязывает себя независимо от того, что происходит с высотой страницы. Затем просто отрегулируйте высоту по мере необходимости, когда вам нужно

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>