How to solve the problem of page scrolling after the keyboard pops up with Edge browser input method?

Solution to the problem of page scrolling when the keyboard pops up in Edge browser input method

When using Edge browser, many developers will encounter problems such as page height and scrolling after the keyboard pops up: when the page content fills the screen and there is only one input box, the page height remains unchanged after the keyboard pops up, and you can still scroll up and down. This article will provide a solution.

Problem manifestation: In the Edge browser of mobile phones, simple HTML pages (for example, only contain an input box and background color settings) fill the screen when the keyboard does not pop up, and the content is full of the screen and cannot be scrolled. However, after the keyboard pops up, the page height is not adjusted, resulting in a scroll bar, which is inconsistent with expectations. Users expect the page to be highly adaptable to the visual area after the keyboard pops up and prohibit scrolling.

Solution: The key is to use container elements to wrap the input box and adjust the body element style. Create a div element (for example, the class is named "container") and put the input box into it. At the same time, set the overflow property of the body element to hidden , prohibit scrolling, and set touch-action: manipulation to prevent scrolling under touch events.

Code example:

HTML:

<div class="container">
  <input type="text">
</div>

CSS:

 body {
  overflow: hidden;
  touch-action: manipulation; /* or manipulation */
}

Through the above method, even if the container height is large, the page will not have scroll bars.

Further optimization: To achieve page height adaptation, the page height can be set to visualViewport.height in the page resize event. However, even if the main problem is solved, dragging the input box may still affect the page scrolling if the input box itself allows scrolling, which requires more in-depth discussion and resolution.

The above is the detailed content of How to solve the problem of page scrolling after the keyboard pops up with Edge browser input method?. For more information, please follow other related articles on the PHP Chinese website!