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

[Anonymous]

У меня есть приложение чата с прикрепленными элементами верхнего и нижнего колонтитула. Когда мобильная виртуальная клавиатура открыта, я устанавливаю высоту документа на window.visualViewport.height. Например. если высота браузера составляет 1000 пикселей, а виртуальная клавиатура — 400 пикселей, то window.visualViewport.height равна 600 пикселей, а для и установлено значение 600 пикселей. Верхний и нижний колонтитулы будут корректно отображаться в области просмотра размером 600 пикселей.
Однако пользователи по-прежнему смогут прокручивать всю страницу вверх на 400 пикселей, то есть внизу они увидят 400 пикселей пустого пространства. Как я могу предотвратить появление этого пустого места, сохраняя при этом прикрепленный верхний/нижний колонтитул?
Я пробовал:

• Обнаружение событий прокрутки, но они не запускаются
• Использование IntersectionObserver для элемента ниже области просмотра 600 пикселей, но он никогда не срабатывает
• Использование позиции : исправлено в нижнем колонтитуле, но это не прилипает к низу при прокрутке.
• Позиция прокрутки документа по оси Y всегда равна 0.
• Настройка navigator.virtualKeyboard.overlaysContent не работает. ничего не делаю

В основном тестировалось в Android + Chrome, но та же проблема возникает в iOS + Safari.
Демо-видео, начальное нижнее пустое пространство — это клавиатура: https://i.imgur.com/OMSXAAt.mp4
Изменить
Я нашел хакерское решение, используя window.visualViewport.addEventListener('scroll ', ...). При прокрутке я бы добавил отступ в верхнюю часть страницы, равный window.visualViewport.offsetTop. Однако существует некоторая задержка, поэтому пользователи могут немного прокрутить, а затем запускается обработчик прокрутки. В iOS Safari задержка может составлять более 1 секунды. Есть ли лучшее решение?

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