edge浏览器软键盘弹出导致页面滚动问题的解决方案
许多开发者在使用手机Edge浏览器时，会遇到软键盘弹出后页面高度不变，仍然可上下滚动的困扰。本文将提供有效的解决方案。
问题：在简单的HTML页面中，仅包含背景色和一个输入框。在Edge移动端浏览器中，初始页面充满屏幕，无法滚动。但点击输入框弹出软键盘后，页面背景高度未调整，出现滚动条。
解决方案：核心在于让页面在软键盘弹出后自动调整高度以匹配可视区域，并阻止滚动。 方法是使用div容器包裹输入框，并设置body样式。
具体步骤：
包裹输入框： 使用一个div元素（例如，class为”frame”）包裹输入框：
设置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 值，以达到最佳效果。
以上就是Edge浏览器软键盘弹出后页面滚动问题如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563725.html
微信扫一扫 
支付宝扫一扫 
