解决IOS下唤起软键盘时fixed失效问题

 

刚入手vue就遇到以上问题,本来查了下网上说的很多解决方案,但是无奈没有一个试用于楼主需求的,自己解决吧~

问题:

fixed定位的div内输入框 focus 进入状态，则fixed定位的div被居中在屏幕可视区域

一、思路

IOS唤起软键盘(input框获取焦点),fixed定位相当于absolute,那就在获取焦点事件入手直接用absolute,当软键盘收起自动恢复fixed,所以暂不考虑失焦,根据具体情况适用

二、实现

1.html+css+js

data () {
      return {
          //存放滚动位置
          __scrollTop:0,
      }
    },

methods: {
        getFoucs(){//获取焦点
          if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {//判断IOS
              let _scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || window.scrollY;
              document.querySelector("#fixed").style.position = 'absolute';//直接改为absolute
              document.querySelector("#fixed").style.top= (_scrollTop+44)+'px';
              window.addEventListener("scroll", this.handler, false);//监听scroll事件
            }
        },
        loseFoucs(){//失去焦点
            window.removeEventListener("scroll",this.handler,false);
            document.querySelector("#fixed").style.position = 'fixed';
            document.querySelector("#fixed").style.top= '44px';
        },
        handler() {
            let sel = this;
            var timer = null,newTop;
            function scrollFunc(){
                if(timer) clearTimeout(timer)
                newTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || window.scrollY;
                console.log(sel.__scrollTop,newTop);
                if(newTop === sel.__scrollTop) {
                    clearTimeout(timer);
                    //滚动已停止，写入业务代码
                    console.log("滚动停止");
                    document.querySelector("#fixed").style.position = 'absolute';
                    document.querySelector("#fixed").style.top= (newTop+44)+'px';
                    sel.loseFoucs()//失焦,为防止重复点击才生效问题
                } else{
                    sel.__scrollTop = newTop;
                    timer = setTimeout(scrollFunc,1);
                }
            }scroolFunc()},}

三、总结

虽然实现的不太完美,但由于是修改前辈们的代码,没敢乱动太多,更别想引入其他插件了~

已知小问题:第一次下拉的时候div会抖动

有更好的办法,求分享~

---

2018-11-15更新

事实证明，做兼容最好的方法就是布局，ios下fixed定位失效，可以考虑使用absolute定位去做布局，下面是个布局的demo，亲测可以

搜索框在头部或者底部固定不动