Мобильная версияЗапретить прокрутку на высоте 100 % при открытой виртуальной клавиатуре? ⇐ CSS
-
Гость
Запретить прокрутку на высоте 100 % при открытой виртуальной клавиатуре?
У меня есть приложение для чата с прикрепленными элементами верхнего и нижнего колонтитула. Когда мобильная виртуальная клавиатура открыта, я устанавливаю высоту документа window.visualViewport.height. Например. если высота браузера составляет 1000 пикселей, а виртуальная клавиатура — 400 пикселей, то window.visualViewport.height равна 600 пикселей, а и установлены на 600 пикселей. Верхний и нижний колонтитулы будут корректно отображаться в области просмотра размером 600 пикселей.
Однако пользователи по-прежнему могут прокручивать всю страницу вверх на 400 пикселей, то есть внизу они увидят 400 пикселей пустого пространства. Как я могу предотвратить появление этого пустого места, сохраняя при этом липкий верхний/нижний колонтитул?
Я пробовал:
[*]Обнаружение событий прокрутки, но они не запускаются. [*]Использование IntersectionObserver для элемента ниже области просмотра 600 пикселей, но он никогда не срабатывает. [*]Использование position: fix в нижнем колонтитуле, но он не прилипает к нижней части при прокрутке. [*]Позиция прокрутки документа по оси 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 секунды. Есть ли лучшее решение?
У меня есть приложение для чата с прикрепленными элементами верхнего и нижнего колонтитула. Когда мобильная виртуальная клавиатура открыта, я устанавливаю высоту документа window.visualViewport.height. Например. если высота браузера составляет 1000 пикселей, а виртуальная клавиатура — 400 пикселей, то window.visualViewport.height равна 600 пикселей, а и установлены на 600 пикселей. Верхний и нижний колонтитулы будут корректно отображаться в области просмотра размером 600 пикселей.
Однако пользователи по-прежнему могут прокручивать всю страницу вверх на 400 пикселей, то есть внизу они увидят 400 пикселей пустого пространства. Как я могу предотвратить появление этого пустого места, сохраняя при этом липкий верхний/нижний колонтитул?
Я пробовал:
[*]Обнаружение событий прокрутки, но они не запускаются. [*]Использование IntersectionObserver для элемента ниже области просмотра 600 пикселей, но он никогда не срабатывает. [*]Использование position: fix в нижнем колонтитуле, но он не прилипает к нижней части при прокрутке. [*]Позиция прокрутки документа по оси 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 секунды. Есть ли лучшее решение?
