How to make scroller consider open mobile device keyboard

Question

The scroller calculation doesn't take into account the space that the mobile keyboard occupies. And so I can't scroll, or even see the whole window when the keyboard is open. How can I make view height take that space into account, and show the scroller when needed?

In the Screenshot below, the page doesn't take the whole vh ,so the scroller doesn't appear. Even if it does take more than the vh, the scroller doesn't "allow" you to see the whole screen because it doesn't take into account the mobile keyboard :

Answer 1

Have you tried changing the height of you page depending on if the keyboard is open or not?

First you need to calculate the size of the keyboard. We'll use the events focus and blur which are triggered when selecting a form. Let's also add the class scrollable to the component containing all of your forms. You can use a different method to select your container.

const input = document.querySelector('input');
const scrollable = document.querySelector('.scrollable');

input.addEventListener('focus', () => {
  scrollable.style.setProperty('--keyboard-height', '250px');
});

input.addEventListener('blur', () => {
  scrollable.style.setProperty('--keyboard-height', '0');
});

Then in the CSS you apply that style only for mobile views.

@media (max-width: 767px) {
  .scrollable {
    height: calc(100vh - var(--keyboard-height));
  }
}