vant popup中的input在移动端H5下出现键盘遮挡?

661 阅读1分钟

本人测试下面方法是生效的;

环境:vue3.2 less vant4 

popup(position:bottom)+input

实现方法

// 解决获取光标后键盘遮挡
function scrollKeywords(distance) {
  if (document.scrollingElement.scrollTop < 100) {
    let _scrollTop = 0
    let scrollTopTimer = null
    if (scrollTopTimer) clearInterval(scrollTopTimer)
    scrollTopTimer = setInterval(() => {
      const iSpeed = Math.floor(distance / 4)
      _scrollTop += iSpeed
      document.scrollingElement.scrollTop = _scrollTop
      // document.body.scrollTop = _scrollTop
      if (_scrollTop >= distance - 3) {
        clearInterval(scrollTopTimer)
      }
    }, 20)
  }
}

//输入框聚焦事件
function inputFocus() {
  scrollKeywords(500)
}