Запретить скрытие адресной строки в мобильных браузерах

В настоящее время я работаю над сайтом с горизонтальной компоновкой. Все элементы имеют положение: абсолютное с javascript. Их размер рассчитывается с помощью window.innerHeight. Моя проблема в том, что, несмотря на то, что элементы не превышают высоту окна, я могу прокрутить вниз (высота адресной панели). Это раздражает двумя способами. Сначала он запускает событие изменения размера окна, которое я не хочу и не нуждаюсь в то время. И во-вторых, он не очень хорошо работает с некоторыми ящиками контента, содержимое которых должно прокручиваться по вертикали. Иногда я могу прокручивать поля, но иногда сначала прокручивается вся страница (как говорилось выше: высота адресной панели). Есть ли какое-либо решение, которое позволило бы мне предотвратить этот механизм автоматического скрытия на всех устройствах.

Спасибо заранее!

Это не прокручивается вообще: http://maxeffenberger.de/test.html

Это можно прокручивать по горизонтали (имеет смысл видеть скрытый контент), но также вертикально, пока адресная панель не будет скрыта (нет смысла, поскольку нет дополнительного "вертикального" контента, для которого потребуется больше места: http://maxeffenberger.de/test2.html

ОТВЕТЫ

Ответ 1

Вот как я этого добился:

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
  width: 50%;
  margin-left: 25%;
}

Ответ 2

Используйте этот код стиля на своей странице. Теперь ваша хромированная строка URL не будет скрыта. Она прекратит прокрутку.

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

Ответ 4

если у кого-то все еще есть проблема со скрытой адресной строкой, это то, как она работала для меня.

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

Я пробовал много похожего кода, но Android Chrome убивал меня. Только это сработало для меня. Если у вас есть навигация внизу страницы, это большая проблема с этой панелью автоматического скрытия.

Ответ 5

Использовать window.innerHeight для установки границ для вашего сайта

Вы можете установить html и тело или вашу обертку в

var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

Имейте в виду, что его необходимо обновлять при каждом изменении размера!

window.innerHeight позволяет получить фактическую высоту внутренней части просмотра браузера (без панели браузера). Вы можете достичь высоты содержимого, когда полоска видима или даже когда она скрыта (выталкивается вниз).

В моем случае:
1. установите тело на 100vh через CSS.
К сожалению, vh игнорирует полосы браузера, что вызывает некоторые проблемы на мобильных устройствах с современными браузерами, которые скрывают панель во время/после прокрутки. Посмотрите в.

Это также мое решение проблем, подобных приведенным выше.

2. Вычислите точную высоту через JS с указанной функцией. Обновление при каждом изменении размера!
= > содержимое сайта теперь ограничено внутренней частью представления.

На мобильном:
Android 7.1.1/Chrome 61.0 iOS 9.3.5/Safari

= > теперь панель браузера больше не скрывается в событиях прокрутки и прокрутки.

Имейте в виду:
Он работает только тогда, когда вы не используете некоторую библиотеку, которая приводит к тому, что вы прокручиваете по горизонтали, но на самом деле используете body.height.