edge浏览器软键盘弹出导致页面滚动问题的解决方案
许多开发者在使用手机Edge浏览器时，会遇到软键盘弹出后页面高度不变，仍然可上下滚动的困扰。本文将提供有效的解决方案。
问题：在简单的HTML页面中，仅包含背景色和一个输入框。在Edge移动端浏览器中，初始页面充满屏幕，无法滚动。但点击输入框弹出软键盘后，页面背景高度未调整，出现滚动条。
解决方案：核心在于让页面在软键盘弹出后自动调整高度以匹配可视区域，并阻止滚动。 方法是使用div容器包裹输入框，并设置body样式。
具体步骤：
- 包裹输入框： 使用一个div元素（例如，class为"frame"）包裹输入框：
<div class="frame"> <input type="text"> </div>
- 设置body样式： 在CSS中设置body样式：
body {
overflow: hidden;
touch-action: manipulation; /* 或更精确的 touch-action 值 */
}
overflow: hidden; 阻止内容超出容器显示，防止滚动。touch-action: manipulation; (或更精确的 touch-action 值，根据实际需求选择，例如 touch-action: pan-y 只允许垂直滚动) 控制触摸行为，避免页面意外滚动。
-
页面高度自适应 (可选)： 为了更完善地解决问题，可以在页面尺寸改变事件 (
resize) 中，动态调整页面高度：
window.addEventListener('resize', () => {
document.body.style.height = `${window.visualViewport.height}px`;
});
这能确保页面高度始终与可视区域高度一致。
注意：即使采用以上方法，在软键盘弹出后拖动可滚动元素（例如，允许滚动的输入框）时，页面仍可能出现滚动。 这需要更深入的分析和针对性解决。 建议根据实际情况选择合适的 touch-action 值，以达到最佳效果。
