edge浏览器软键盘弹出导致页面滚动问题的解决方案
许多开发者在使用手机Edge浏览器时，会遇到软键盘弹出后页面高度不变，仍然可上下滚动的困扰。本文将提供有效的解决方案。
问题：在简单的HTML页面中，仅包含背景色和一个输入框。在Edge移动端浏览器中，初始页面充满屏幕，无法滚动。但点击输入框弹出软键盘后，页面背景高度未调整，出现滚动条。
解决方案：核心在于让页面在软键盘弹出后自动调整高度以匹配可视区域，并阻止滚动。 方法是使用div容器包裹输入框，并设置body样式。
具体步骤：
<div class="frame"> <input type="text"> </div>
body {
overflow: hidden;
touch-action: manipulation; /* 或更精确的 touch-action 值 */
}overflow: hidden; 阻止内容超出容器显示，防止滚动。touch-action: manipulation; (或更精确的 touch-action 值，根据实际需求选择，例如 touch-action: pan-y 只允许垂直滚动) 控制触摸行为，避免页面意外滚动。
window.addEventListener('resize', () => {
document.body.style.height = `${window.visualViewport.height}px`;
});这能确保页面高度始终与可视区域高度一致。
注意：即使采用以上方法，在软键盘弹出后拖动可滚动元素（例如，允许滚动的输入框）时，页面仍可能出现滚动。 这需要更深入的分析和针对性解决。 建议根据实际情况选择合适的 touch-action 值，以达到最佳效果。
以上就是Edge浏览器软键盘弹出后页面滚动问题如何解决？的详细内容，更多请关注php中文网其它相关文章！
Edge浏览器是由Microsoft（微软中国）官方推出的全新一代手机浏览器。Edge浏览器内置强大的搜索引擎，一站搜索全网，搜文字、搜图片，快速识别，帮您找到想要的内容。有需要的小伙伴快来保存下载体验吧！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
930
