移动端网页：给body设置 overflow：hidden 无效的解决办法

最新推荐文章于 2023-02-08 18:25:36 发布

原创最新推荐文章于 2023-02-08 18:25:36 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#移动端overflow无效 #移动端网页开发 #移动端踩坑

移动端web 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种解决移动端网页在软键盘弹出时页面滚动问题的方法，通过固定html元素的位置并设置其高度和宽度，确保页面背景图片不被压缩，页面不会因键盘弹出而滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做移动端网页的时候，总会遇到一些奇葩的问题，在PC端浏览器做模拟调试时，都是完美显示的，但是一到真机调试就是各种坑；

我在做移动端网页时的需求是这样的：

页面背景图片是自适应屏幕大小的，页面上有输入框和按钮，当点击输入框时，移动端的软键盘弹出，但是背景图片不能受影响而被压缩，且页面不能应为软键盘的弹出高度超出屏幕显示高度而上下滚动；

我的解决方案如下：

在页面初始化时，获取设备像素可见宽高，并设置body的高度为此高度；

代码如下：

      var clientHeight = document.documentElement.clientHeight;;
      var body = document.getElementById("body");
      body.style.height = clientHeight + "px";

为了防止软键盘弹出式高度增加使得页面滚动，于是我又给body设置overflow:hideden;

代码如下：

body{
    width:100%;
    overflow:hidden;
}

设置完成后，我在PC端的浏览器上做测试，发现已经达到预期的效果了，后来上真机测试，问题来了，软键盘弹出时，页面会发生滚动，body的overflow:hidden无效；IOS和安卓效果都是这样；

后来找了一下相关的案例，终于找到了解决办法；

方法如下：

通过父节点固定，像body的父节点是html，可以通过固定父节点html，来把其下的子节点固定，当然子节点前提是不做脱离文档流的行为。

html{

       position:fixed;

       height:100%;

       width:100%;

    }

问题完美解决！！