How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

Question

How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

My chat app has sticky header and footer elements. To handle the mobile virtual keyboard opening, I adjust the document's height using window.visualViewport.height. For example, if the browser's height is 1000px and the virtual keyboard takes up 400px, then window.visualViewport.height will be 600px, setting both <html> and <body> to that height. This allows the header and footer to display correctly within the 600px viewport.

However, there is an issue where users can still scroll the entire page up by 400px, revealing empty space at the bottom. How can I prevent this empty space from showing while maintaining the sticky header/footer functionality?

I've attempted various solutions:

Listening for scroll events, but they are not triggered
Using an IntersectionObserver on an element below the viewport, which never triggers
Applying position: fixed to the footer, but it does not remain fixed when scrolling
The document's scroll Y position always remains at 0

Setting

navigator.virtualKeyboard.overlaysContent

has no effect

This issue persists in Android + Chrome, as well as iOS + Safari.

View a video demonstration showcasing the initial white space caused by the keyboard:

Edit

I discovered a workaround involving

window.visualViewport.addEventListener('scroll', ...)

. On scroll, I dynamically add padding to the top of the page matching window.visualViewport.offsetTop. However, there is some delay where users can scroll before the scroll handler kicks in. In iOS Safari, this delay can exceed 1 second. Is there a more effective solution to address this issue?

javascript css web-applications sticky-footer intersection-observer

Answer 1

Answer №1

To ensure the position remains unchanged when the keyboard pops up, consider utilizing the virtualkeyboard event and modifying the parent div to hide scrolling while it is active, and enabling scrolling once it disappears:

Check out the code snippet below for guidance:

if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
    // Determine if the keyboard is open (you need to create this logic yourself)
    // For example:
    let keyboardOpen = height > 0;
    if (keyboardOpen) {
        // Disable scrolling on the parent element by setting overflow to hidden
        document.getElementById("parent-div").style.overflow = "hidden";
    } else {
        // Re-enable scrolling on the parent element
        document.getElementById("parent-div").style.overflow = "scroll";
    }

  });
}

Make sure to replace the correct div ID in the document query and assign an ID to the div within its HTML tag.

Additional Resources:

Mozilla virtual keyboard API

Virtual Keyboard API

Answer 2

To ensure the position remains unchanged when the keyboard pops up, consider utilizing the virtualkeyboard event and modifying the parent div to hide scrolling while it is active, and enabling scrolling once it disappears:

Check out the code snippet below for guidance:

if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
    // Determine if the keyboard is open (you need to create this logic yourself)
    // For example:
    let keyboardOpen = height > 0;
    if (keyboardOpen) {
        // Disable scrolling on the parent element by setting overflow to hidden
        document.getElementById("parent-div").style.overflow = "hidden";
    } else {
        // Re-enable scrolling on the parent element
        document.getElementById("parent-div").style.overflow = "scroll";
    }

  });
}

Make sure to replace the correct div ID in the document query and assign an ID to the div within its HTML tag.

Additional Resources:

Mozilla virtual keyboard API

Virtual Keyboard API

Answer 3

Answer №2

Here is a solution that combines various techniques for optimal results.

Source: Get viewport height when soft keyboard is on

JSBin code: https://jsbin.com/nayigetido/1/edit?html,css,js,output

JSBin Output: https://jsbin.com/nayigetido/1/edit?output

HTML:

<head>
  <!-- Remember to include the meta tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
</head>
<body>
  <div id="chat">
    <div class="messages">Messages</div>
    <input type="text"/>
  </div>
</body>

CSS:

#chat{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  padding:3em;
  box-sizing:border-box;
}
.messages{
  height:100%;
  flex:1 1 auto;
}
input{
  width:100%;
}

html,body{
  margin:0;
  height:100%;
}

JS:

window.addEventListener('resize', () => {
  const chat = document.getElementById('chat');
  chat.style.height = window.visualViewport.height + 'px';
});

Answer 4

Here is a solution that combines various techniques for optimal results.

Source: Get viewport height when soft keyboard is on

JSBin code: https://jsbin.com/nayigetido/1/edit?html,css,js,output

JSBin Output: https://jsbin.com/nayigetido/1/edit?output

HTML:

<head>
  <!-- Remember to include the meta tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
</head>
<body>
  <div id="chat">
    <div class="messages">Messages</div>
    <input type="text"/>
  </div>
</body>

CSS:

#chat{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  padding:3em;
  box-sizing:border-box;
}
.messages{
  height:100%;
  flex:1 1 auto;
}
input{
  width:100%;
}

html,body{
  margin:0;
  height:100%;
}

JS:

window.addEventListener('resize', () => {
  const chat = document.getElementById('chat');
  chat.style.height = window.visualViewport.height + 'px';
});

How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

Edit

Answer №1

Answer №2

Similar questions

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

Using the onreadystatechange method is the preferred way to activate a XMLHttpRequest, as I am unable to trigger it using other methods

Advantages of using individual CSS files for components in React.js

Having trouble aligning the image to the center

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is it possible to eliminate jagged edges in CSS 2D rasterization by applying anti-aliasing to subpixels?

Unable to manipulate JQuery lightSlider slides using element index

Fill in according to the options selected in the dropdown menu

Sending an array with a specific identifier through JQuery ajax

Is it feasible to verify for vacant dates with a single click?

JS Implementation of the Coin Change Algorithm

Increase the spacing between the dropdown menu and the first option

Ways to showcase a standalone identifier from iTunes RSS

The display of data attributes is not being rendered correctly

Issues with Dependency Injection in Angular.js

Display the current language in the Vue language dropdown

Confirm that the Time sequence is accurate using JavaScript Selenium

Exploring Material UI: Customizing the styling of components within TablePagination

Morris.js is throwing an error message, stating "Uncaught TypeError: Unable to access the 'label' property as it

Issues with properly functioning collapse button in Bootstrap 5.1.3 Navigation Bar