vue中解决光标跑位,IOS中不适配

1.vue中解决光标跑位,IOS中不适配
2. 首先还是要对弹框将fixed, 对于其父盒子relative定位
3.position:absolute,页面滚动了多少就给他,加多少top值;

if(app.isiOS) {
	this.TopDom = document.querySelector('.price_container');
	this.curTop = parseFloat(window.getComputedStyle(this.TopDom ).top) ;
	this.focusBlur(document.querySelector('.price_modal'));
}
  focusBlur(modalElem) {
      if (!modalElem) {
        return ;
      }
      let startTime, endTime;
      let inputDomArr = Array.from(modalElem.querySelectorAll('input'));
      let textareaDomArr = Array.from(modalElem.querySelectorAll('textarea'));
      let domArr = [...inputDomArr, ...textareaDomArr];
      let setTop = this.setTop;
      window.scrollTo(0, 0);
       modalElem.style.position = 'absolute';
      domArr.forEach((elem) => {
        elem.addEventListener('focus', () => {
          setTop('focus')
          endTime = Date.now();
        });
        elem.addEventListener('blur', () => {
          setTop('blur')
          startTime = Date.now();
          let timer = setTimeout(function() {
            if (Math.abs(endTime - startTime) > 30) {
              window.scrollTo(0, 0);
            }
            clearTimeout(timer);
          }, 40);
        });
      })
    },
    // 页面滚动多少,就跟top加多少值
	setTop(type){
	   if(type=='focus'){
	     const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
	     window.console.log(scrollTop)
	    this.TopDom.style.top = scrollTop + this.curTop +'px';
	   }else if(type=='blur'){
	    this.TopDom.style.top =  this.curTop +'px';
	   }
	},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值