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

2019-02-12  本文已影响0人  Mr老朝

出现原因:

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);
    },
上一篇 下一篇

猜你喜欢

热点阅读