Top
Fork me on Gitee My Github

页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景

微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复!

解决代码

后台框架嵌入iframe的情景,iframe内部页面输入框唤醒软键盘,控制顶层window滚动

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
            if(wechatInfo){
                $("input,textarea").blur(function(){
                    var currentPosition,timer;
                    var speed=1;//页面滚动距离
                    timer = setInterval(function(){
                        currentPosition = $('window.top').scrollTop();
                        currentPosition-=speed; 
                        window.top.scrollTo(0,currentPosition);//页面向上滚动
                        currentPosition+=speed; //speed变量
                        window.top.scrollTo(0,currentPosition);//页面向下滚动
                        clearInterval(timer);
            },1);
       })
}

普通页面

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                //在微信中打开
            $("input,textarea").blur(function(){
                var currentPosition,timer;
                var speed=1;//页面滚动距离
                timer=setInterval(function(){
                    currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
                    currentPosition-=speed; 
                    window.scrollTo(0,currentPosition);//页面向上滚动
                    currentPosition+=speed; //speed变量
                    window.scrollTo(0,currentPosition);//页面向下滚动
                    clearInterval(timer);
                },1);
       })
   }    
}

后来在开发中,ios 嵌入h5页面也出现这种状况了,思路是一样的

onblurFn(index) {
  setTimeout(() => {
      var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
      // window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      this.scrollAnimation(Math.max(scrollHeight - 1, 0), 0)
  }, 100);
},
scrollAnimation(currentY, targetY) { // 解决
  // 获取当前位置方法
  // const currentY = document.documentElement.scrollTop || document.body.scrollTop
  // 计算需要移动的距离
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
      // 一次调用滑动帧数,每次调用会不一样
      const dist = Math.ceil(needScrollTop / 14)
      _currentY += dist
      window.scrollTo(_currentY, currentY)
      // 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
      if (needScrollTop > 14 || needScrollTop < -14) {
          scrollAnimation(_currentY, targetY)
      } else {
          window.scrollTo(_currentY, targetY)
      }
  }, 1)
}
posted @ 2019-03-22 10:52  lisashare  阅读(1888)  评论(0编辑  收藏  举报