Edge浏览器软键盘弹出时页面滚动解决技巧

Edge浏览器移动端软键盘弹出导致页面滚动是一个困扰众多开发者的常见问题。本文针对Edge浏览器软键盘弹出后页面高度不变，仍然可上下滚动的现象，提供有效的解决方案。通过CSS控制body的`overflow`和`touch-action`属性，并使用div容器包裹输入框，可以有效阻止页面滚动。此外，监听页面尺寸变化事件(`resize`)并动态调整页面高度，可以进一步完善解决方案，确保页面高度与可视区域一致。 文章将详细讲解具体步骤及代码实现，帮助开发者彻底解决Edge移动端浏览器软键盘弹出页面滚动问题。

Edge浏览器软键盘弹出导致页面滚动问题的解决方案

许多开发者在使用手机Edge浏览器时，会遇到软键盘弹出后页面高度不变，仍然可上下滚动的困扰。本文将提供有效的解决方案。

问题：在简单的HTML页面中，仅包含背景色和一个输入框。在Edge移动端浏览器中，初始页面充满屏幕，无法滚动。但点击输入框弹出软键盘后，页面背景高度未调整，出现滚动条。

解决方案：核心在于让页面在软键盘弹出后自动调整高度以匹配可视区域，并阻止滚动。 方法是使用div容器包裹输入框，并设置body样式。

具体步骤：

1. 包裹输入框： 使用一个div元素（例如，class为"frame"）包裹输入框：

<div class="frame">
  &lt;input type=&quot;text&quot;&gt;</div>

2. 设置body样式： 在CSS中设置body样式：

body {
  overflow: hidden;
  touch-action: manipulation; /* 或更精确的 touch-action 值 */
}

overflow: hidden; 阻止内容超出容器显示，防止滚动。touch-action: manipulation; (或更精确的 touch-action 值，根据实际需求选择，例如 touch-action: pan-y 只允许垂直滚动) 控制触摸行为，避免页面意外滚动。

3. 页面高度自适应 (可选)： 为了更完善地解决问题，可以在页面尺寸改变事件 (resize) 中，动态调整页面高度：

window.addEventListener('resize', () => {
  document.body.style.height = `${window.visualViewport.height}px`;
});

这能确保页面高度始终与可视区域高度一致。

注意：即使采用以上方法，在软键盘弹出后拖动可滚动元素（例如，允许滚动的输入框）时，页面仍可能出现滚动。 这需要更深入的分析和针对性解决。 建议根据实际情况选择合适的 touch-action 值，以达到最佳效果。

好了，本文到此结束，带大家了解了《Edge浏览器软键盘弹出时页面滚动解决技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！