美文网首页
微信弹起键盘后截断页面的bug(2018.12.14)

微信弹起键盘后截断页面的bug(2018.12.14)

作者: Mr老朝 | 来源:发表于2019-02-12 16:51 被阅读0次

出现原因:

iphone微信6.7.4版本出现的问题,微信官方承认这是一个他们的bug

解决方法:

input的onblur方法设置为:

function blurToTop(top = 0) {
  document.body.scrollTop = top;
  window.pageYOffset = top;
  document.documentElement.scrollTop = top;
}

前提,body本身不可滚动

实现原理:

监听input的blur事件,手动下拉页面

多个input之前切换页面抖动

上面的解决方法会出现多个input之间切换的时候页面出现抖动
解决方法是input的blur事件设置setTimeout,在input的focus事件中clearTimeout

    focusHandler() {
      this.timer && clearTimeout(this.timer);
    },

    blurHandler() {
      this.timer = setTimeout(() => {
        document.body.scrollTop = 0;
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0;
      }, 100);
    },

相关文章

网友评论

      本文标题:微信弹起键盘后截断页面的bug(2018.12.14)

      本文链接:https://www.haomeiwen.com/subject/lmukeqtx.html