• 页面的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)
    }
    
  • 相关阅读:
    Python 学习---------Day2
    算法入门笔记------------Day2
    Python 学习---------Day1
    算法入门笔记------------Day1
    从零系列--开发npm包(一)
    webpack2.0+ vue2.0
    gulp + angular + requirejs 简单学习
    MAC node + git + bower 简单安装
    通过docker image repository 获取docker imges id 并删除
    docker 安装vim
  • 原文地址:https://www.cnblogs.com/lisaShare/p/10576875.html
Copyright © 2020-2023  润新知