手机端软键盘弹出又收回后，页面下方留空白、样式定位错乱或不能滚动

手机端的兼容性非常多，其中软键盘导致页面错误及滚动问题也很常见！

原因：软键盘弹出和收回时页面的高度会随之变化，所以常伴有页面样式定位错乱或页面滚动的问题存在！

实现：通过监听页面尺寸变相的实现监听软键盘是否弹出或收回，每次弹出或收回时强制将页面高度重置为初始高度！

html代码

  <div class="overflow-auto" :style="'height:'+scrollerHeight+'px'" >
   内容
   内容
   内容
   内容
   内容
  </div>

js代码

  created() { 
    // 页面初始高度
    const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
    this.scrollerHeight = originalHeight
    // 监听可视区高度变化 - 防治软键盘弹起后页面不可滚动
    window.onresize = ()=>{
      return(()=>{
        // 键盘弹起与隐藏都会引起窗口的高度发生变化
        const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        // console.log("进入到判断页面高度=========");
        // console.log("页面初始高度========="+originalHeight);
        // console.log("软键盘弹起高度========="+resizeHeight);
        // console.log(originalHeight-resizeHeight)
        if(originalHeight-resizeHeight>0){
          // 当软键盘弹起，在此处操作
          // console.log("进入到软键盘弹起=========");
          document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
          this.scrollerHeight = originalHeight;
        }else{
          // 当软键盘收起，在此处操作
          // console.log("进入到软键盘收起========="+originalHeight);
          document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
          this.scrollerHeight = originalHeight;
        }
      })()
    }
  },

手机端软键盘弹出又收回后，页面下方留空白、样式定位错乱或不能滚动

相关推荐