Vue解決微信瀏覽器input關閉鍵盤後導致頁面底部空缺的問題

導致原因:

是微信webview打開我們h5頁面的時候,就固定了頁面的高度,如果這個input在頁面的底部,當喚起軟鍵盤的時候,由於高度問題,整個webview會被鍵盤頂上去,,而取消的時候沒有恢復原狀。

解決辦法

第一種:失去焦點後自動置頂

inputLoseFocus() {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
},

第二種:使scrollTo回到底部

inputLoseFocus() {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollHeight
      || document.body.scrollHeight;
    window.scrollTo({
      top: scrollHeight,
      behavior: 'smooth',
    });
  }, 100);
}

第三種:計算當前input距離頂部的高度,使頁面滾動到當前位置

inputLoseFocus() {
 console.log(`window.pageYOffset: ${window.pageYOffset}`);
  window.scrollTo({
    top: window.pageYOffset,
    behavior: 'smooth',
  });
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章