How to solve the problem of page scrolling after the soft keyboard of the mobile Edge browser pops up?

Mobile Edge browser soft keyboard pops up and causes page scrolling problems and solutions

When using the Edge browser on your mobile phone, after the soft keyboard pops up in the input box, the page often has an annoying problem: the page height remains unchanged and can still scroll up and down, which is inconsistent with the expected effect, especially when the page content exceeds the screen. This article analyzes this problem and provides solutions.

Problem Brief Description: In a simple HTML page (including an input box), after the soft keyboard pops up, the page fails to automatically adjust the height to match the visual area, but retains the original height, resulting in a scroll bar and scrolling beyond the screen content, affecting the user experience.

Solution 1: Use containers to control scrolling

This problem can be effectively solved through CSS style and HTML structure adjustment. The method is: wrap the input box with a div container, and set overflow property of the body to hidden , and set touch-action property to none .

HTML code:

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

CSS code:

 body {
  overflow: hidden;
  touch-action: none;
}

overflow: hidden prevents body scrolling, touch-action: none further prohibits touch scrolling. The .frame container contains input boxes to ensure that the input box area can be displayed and interact normally.

Solution 2: Dynamically adjust the page height

A simpler solution is to use the browser window size to change the event ( resize ) and dynamically adjust the page height. In resize event listener, set the page height to visualviewport.height so that the page height is adjusted according to the visual area changes. This requires JavaScript implementation.

However, even with the above approach, in some special cases, such as the input box itself allows scrolling, dragging the input box may still cause the page to scroll. This requires deeper analysis and more complex solutions.

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