H5键盘弹起,遮挡问题

62 阅读1分钟

app.vue中
具体实现如下:

onMounted(() => {
  const originHeight = window.innerHeight;
  // android
  window.addEventListener('resize', () => {
    requestAnimationFrame(() => {
      const curHeight = window.innerHeight;
      // 获取焦点的元素
      const activeElement = document.activeElement;
      // 弹起
      if(curHeight < originHeight) {
        window.scrollTo({ top: activeElement.getBoundingClientRect().bottom - (originHeight - curHeight), behavior: 'smooth' })
      }else {
        window.scrollTo({ top: 0, behavior: 'smooth' })
      }
    })
  });
  // ios, 解决键盘收起后,位置无法恢复问题
  document.body.addEventListener('focusout', () => {
    // console.log(document.documentElement.scrollTop)
    window.scrollTo({top: 0, behavior: 'smooth' });
  });
})

参考链接:
www.cnblogs.com/aloneMing/p… blog.csdn.net/qq_30834535…