Предотвращение прокрутки с высотой 100% тела при открытии виртуальной клавиатуры? ⇐ CSS

[Anonymous]

У меня есть приложение для чата с липкими элементами заголовка и нижнего колонтитула. Когда мобильная виртуальная клавиатура открыта, я установил высоту документа в Window.visualViewport.height . Например. Если высота браузера составляет 1000px, а виртуальная клавиатура - 400px, то window.visualViewport.height - 600px, а оба и установлены на 600px. Заголовок и нижний колонтитул будут правильно отображаться в пределах 600PX Viewport. Как я могу предотвратить отображение этого пустого пространства, пока все еще имея липкий заголовок /нижний колонтитул? > Обнаружение событий прокрутки, но они не увольняются < /li>
[*] Использование recsectionObserver на элементе ниже просмотра 600px, но он никогда не запускает < /li>
: Исправлен в нижнем колонтитуле, но он не прилипает к дне при прокрутке
[*] Положение прокрутки Y -прокрутки Y всегда 0
[*] Настройка navigator.virtualkeyboard.overlayScontent ничего не делает

в основном тестируется в Android + Chrome, но та же проблема возникает в ios + safari .
Видео демонстрация, начальным нижним пустым пространством является клавиатура: https://i.imgur.com/omsxaat.mp4образно /h2>
Я нашел хакерское решение с использованием window.visualviewport.addeventListener ('scroll', ...) < /code>. На прокрутке я бы добавил немного прокладки в верхнюю часть страницы, равный window.visualViewport.offsetTop . Тем не менее, есть некоторая задержка, поэтому пользователи могут немного прокручивать, затем запускается обработчик свитков. На сафари для iOS отставание может быть более 1 секунды. Есть лучшее решение?

Подробнее здесь: https://stackoverflow.com/questions/766 ... oards-open