页面的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);
       })
   }    
}

转载于:https://www.cnblogs.com/lisaShare/p/10576875.html