Прокрутка и удержание на мобильных устройствах показывает элементы, расположенные чуть ниже области просмотра - PullRequest
Новая
       6

Прокрутка и удержание на мобильных устройствах показывает элементы, расположенные чуть ниже области просмотра

0 голосов
/ 12 мая 2019

У меня есть элемент, который я хочу показать, когда пользователь нажимает на что-то, появляющееся в нижней части экрана.Для этого у меня есть код здесь: Ссылка CodePen .Соответствующий код: 

document.getElementsByClassName('filler')[0].addEventListener('click', e => {     
  document.getElementById('target').classList.add('targetChanged');
});
body {
  min-height: 100vh;
}

.filler { 
  margin: 0 auto;
  width: 200px;
  height: 100px;
  
  background-color: black;
  margin-bottom: 10px;
}

.locatedBelowViewport {
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  
  background-color: red;
  transform: translateY(100%);
  transition: all 1s ease;
}

.targetChanged {
  transform: translateY(0);
}
<body>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div class = "filler"></div>
  <div id = "target" class = "locatedBelowViewport"></div>
</body>

Как вы можете видеть, когда вы нажимаете первый черный ящик на дисплее, появляется красный <div>.Нет ничего плохого в том, что я пытался смоделировать его в CodePen на моем мобильном устройстве (Android-устройстве), поскольку «панель инструментов» устройства моего Google Chrome не исчезает (для справки, это «панель инструментов», о которой я говорю):

Toolbar

Однако на моей обычной статической веб-странице прокрутка вниз приводит к ее исчезновению и оставляет зазор в нижней части экрана (размертеперь исчезла "панель инструментов") и я могу видеть красный <div> там, когда я прокручиваю и удерживаю.Только прокрутка не вызывает этой проблемы.

Есть ли способ обойти это поведение, которое не включает предотвращение исчезновения «панели инструментов» (я хочу, чтобы она исчезала, когда пользователи прокручивали страницу вниз)?

1 Ответ

0 голосов
/ 12 мая 2019

Поможет ли сделать .locatedBelowViewport выше? 

.locatedBelowVieport {
  height: 120%; // some number greater than 100
}
...